Validation on my form? "Please fill in required fields"

Question

I have a username form. Which have 2 fields, username and password. Basically I want it so if the user has not entered the fields and pressed 'submit' an error displays like "Please enter the required fields"

I know it's possible with JavaScript or PHP but unsure how to do it.

Here is the code of the user and password form:

<div id="sessionContainer" class="clearfix">
  <div class="content">
    <form action="goto.php" class=" sign-in" method="post">
      <div style="margin:0;padding:0"></div>
      <h3>Enter Details</h3>
      <p><font size="-1">Please enter your details</font></p><br>
      <div class="clearfix">
        <label for="">Username or email address</label><br>
        <input class="xlarge" id="email" name="email" tabindex="1" type="text" value="" />
      </div>
      <div class="clearfix">
        <label for=""><br>
          Password</label><br>
        <input class="xlarge" id="password" name="password" tabindex="2" type="password" value="" />
      </div>


      <p class="remember">&nbsp;</p>
      <p class="remember">
        <button class="btn btn-m btn-blue" id="signin_submit" name="commit" type="submit" tabindex=5>Sign in</button>
      </p>

Thanks

Please look into http://www.w3schools.com/js/js_form_validation.asp for validation through javascript. Server side validation will not be efficient here. — Piyas De, Mar 13 '13 at 17:57
@PiyasDe you should use both... How does it make sense to only validate on the client end. Validation on the client end is more for UX honestly. You should always validate on the backend because client side can be tampered with and javascript can be disabled... — Jeff Shaver, Mar 13 '13 at 18:00

score 2 · Answer 1 · answered Mar 13 '13 at 17:57

2

<?php if(!isset($_POST['email']) || !isset($_POST['password'])

This code will check if either of those fields has a value. If it does not, you can output an error message. The code in the whole context is as follows:

<?php if(!isset($_POST['email']) || !isset($_POST['password']): ?>
    <div>Please fill in all fields!</div>
<?php endif; ?>

answered Mar 13 '13 at 17:57

Josh Miller

120
8

Hi, where would this code be placed? In goto.php or will i have to make new file? – John Kee Mar 13 '13 at 21:30

score 1 · Accepted Answer · answered Mar 13 '13 at 18:12

This is my answer...in clasic javascript xD:

<html>
  <head>
  <script type="text/javascript">
  function validar()
  {
     var right = 1;

     if(document.getElementById('email').value.length==0)
     {
        right = 0;
        document.getElementById('emptymail').innerHTML = "Empty Mail o Username";
     }
     if(document.getElementById('password').value.length==0)
     {
        right = 0;
        document.getElementById('emptypass').innerHTML = "Empty Password";
     }

    if(right == 1)
    {
      document.forms["formu"].submit();
    }

  }
  </script>
  </head>
  <body>
  <form action="goto.php" class=" sign-in" method="post" name="formu" id="formu">
        <div style="margin:0;padding:0"></div>
        <h3>Enter Details</h3>
        <p><font size="-1">Please enter your details</font></p><br>
        <div class="clearfix">
          <label for="">Username or email address</label><br>
          <input class="xlarge" id="email" name="email" tabindex="1" type="text" value="" /><div id="emptymail"></div>
        </div>
        <div class="clearfix">
          <label for=""><br>
            Password</label><br>
          <input class="xlarge" id="password" name="password" tabindex="2" type="password" value="" /><div id="emptypass"></div>
        </div>


        <p class="remember">&nbsp;</p>
        <p class="remember">
          <button class="btn btn-m btn-blue" id="signin_submit" name="commit" type="button" tabindex=5 onclick="validar();">Sign in</button>
        </p>

  </form>
  </body>
  </html>

Saludos ;)

As Jeff stated above, Javascript can be tampered with, as well as disabled. Server-side is always the best way to go, IMO. ;-) — Funk Forty Niner, Mar 13 '13 at 18:17
Thats ok...but in anyway you can have both ways...client side and server side...i do both ways...actually i use ajax anyway...and the term of using or not JS should be done in the initial part of the project;) — Hackerman, Mar 13 '13 at 18:22

score 0 · Answer 3 · edited May 23 '17 at 10:29

0

HTML only solution using the required attribute (works only in newer browsers):

<input required="required" />

An example how to do a jscript based solution can be found here, here or this one with a little jquery help.

edited May 23 '17 at 10:29

Community

1
1

answered Mar 13 '13 at 17:58

Bjoern

15,934
4
43
48

score 0 · Answer 4 · answered Mar 13 '13 at 18:00

Use jQuery Validate for validations

Download it from here and call it. and then add this code

rules:
{
    email:
    {
        required: true
    }

},
messages:
{
    email:
    {
        required: "Please enter your email."
    }
}

OR simply Use HTML 5 validations

<input id="email" name="email"  type="text" value="" required />

score 0 · Answer 5 · answered Mar 13 '13 at 18:03

To do it using JavaScript, you are looking for the OnSubmit attribute of your form

There are numerous things you can do if the function you called with OnSubmit fails (returns false), but as an example this code will show a popup box

<script>
function checkForm()
{
  if (document.getElementById('email').value.length==0 || document.getElementById('password').value.length==0)
  (
    alert("fill in required fields")
    return false;
  )
  return true;
}
<script>

Then in your form tag you put

<form onsubmit="return checkForm()" ...

score 0 · Answer 6 · answered Mar 13 '13 at 18:09

var $form = $('form'),
    $user = $('#email),
    $pass = $('#password');

$form.on('submit', function(e) {
    e.preventDefault();   // stop the default behavior
    if ($user.text().length === 0) {
        $user.addClass('error'); // do something with the error class or add attribute 'required'
    } else if ($pass.text().length === 0) {
        // do something else
    } else if ($user.text().length > 0 && $pass.text().length > 0) {
          // post the form
          $.ajax({
              url: //URL where you send,
              data: $form.serialize(),
              success: function(e) { // do something },
              error: function(e) { // do something }
        });
    }
}

Validation on my form? "Please fill in required fields"

6 Answers6