Best way to validate form in javascript

Question

Best way to validate form in javascript

I have an HTML form with a button that, when clicked, will check if the fields are empty. Here is the part of my code that performs validation (it works):

var errorMessage ="";
if (document.getElementById('username').value == "")
    {
    errorMessage += "Please enter a username \n";
    document.getElementById('username').style.borderColor = "red";
    }
if (document.getElementById('fname').value == "")
    {
    errorMessage += "Please enter a first name \n";
    document.getElementById('fname').style.borderColor = "red";

}
if (document.getElementById('lname').value == "")
    {
    errorMessage += "Please enter a last name \n";
    document.getElementById('lname').style.borderColor = "red";

    }
if (errorMessage != "")
    {
alert(errorMessage);
}

My problem is that I have more fields to check, I wonder if there is a better way to do this, and not so many if statements (I try to have as little code as possible). I was thinking about using a switch case statement, but will this work? Any suggestions?

+4

javascript html validation

littledevils326 Oct 19 '13 at 13:07

source share

5 answers

Zaffy · Answer 1 · 2013-10-19T13:30:32+0000

You can use a table with field data, and then just iterate over it.

var fields = [[document.getElementById("username"),"Please Enter Your Username"],
              [document.getElementById("fname"),   "Please Enter Your First Name"],
              [document.getElementById("lname"),   "Please Enter Your Last Name"]];

function Check()
{
    var error = [];

    for (var i in fields)
    {
        if (fields[i][0].value == "")
        {
            error.push(fields[i][1]);
            fields[i][0].style.borderColor = "red";
        }
    }

    if (error.length)
        window.alert(error.join(",\n"));

    return !error.length;
}

: , , o , , - : fields[i][0].value.replace(/\s/g, "") == "" .

super · Answer 2 · 2013-10-19T13:09:52+0000

html5, required html. . , , .

- : <input type="text" name="usrname" required>

Roko C. Buljan · Answer 3 · 2013-10-19T14:25:26+0000

, data- * :

<form id="myForm" name="myForm">
   <input type="text" name="username" id="username" data-err="Please enter a username" />
    <input type="text" name="fname" id="fname" data-err="Please enter a first name" />
    <input type="text" name="lname" id="lname" data-err="Please enter a last name"/>

    <input type="submit" />
</form>

function formValidator(){

  var inputs = this.getElementsByTagName('input');
  var allErrors = '';

  for(var i=0; i<inputs.length; i++) {
      var el = inputs[i];
      var data = el.dataset.err;
      if(data && el.value.trim() === ''){
          allErrors += data +'\n';
      }    
  }
  if(allErrors){
      alert(allErrors);
      return false;
  }else{
      alert('All fine. Submit!'); 
  }

}


document.myForm.onsubmit = formValidator;

kamituel · Answer 4 · 2013-10-19T15:04:16+0000

, , , Angular, , Parsley.js ( , "" - jQuery/Zepto dependand, 42kB).

Parsley, . , , HTML, data-type="email".

- ( , . , )

<form id="demo-form" data-validate="parsley">
    <input 
         type="text" 
         name="email" 
         data-trigger="change"         <!-- parsley attributes: data-... -->
         data-required="true" 
         data-type="email" />          <!-- E-mail rule -->

    <input 
         type="text" 
         name="website" 
         data-trigger="change" 
         data-type="url" />            <!-- URL rule -->

    <textarea 
         name="message" 
         data-trigger="keyup" 
         data-rangelength="[20,200]">
    </textarea>
</form>