用于表单提交的Javascript在线验证

Question

Reupdated my Question, I m doing live javascript validation for my coding before submitting form from clientside, i just want validate my firstname, lastname, email id, mobile (10 digit), password. i applied my own coding below,

Mistake: 1 form should not submit without error cleared. Mistake: 2 reduce my javascript code, it look like big. Mistake: 3 While typing email id, system should check whether email id is already register...by using ajax check Please correct and help me on this on this short way.It would be great helpfull ... Updated in this website: eg: http://indyadeal.com/supermarket/checkout (click register and continue)

 function requiredFields() { var erroravailable = 'yes'; var fname = document.getElementById("fname").value; var lname = document.getElementById("lname").value; var mobile = document.getElementById("mobile").value; var email = document.getElementById("email").value; var password1 = document.getElementById("password1").value; var password2 = document.getElementById("password2").value; if (fname == "") { document.getElementById("fname").className = "error incorrect"; document.getElementById("errorfname").className = "error"; document.getElementById("errorfname").innerHTML = 'Please type your First Name'; erroravailable = yes; // if error found return false return false; } else if (!!fname) { document.getElementById("fname").className = "success incorrect"; document.getElementById("errorfname").className = "success"; document.getElementById("errorfname").innerHTML = 'Success'; erroravailable = 'no'; } if (lname == "") { document.getElementById("lname").className = "error incorrect"; document.getElementById("errorlname").className = "error"; document.getElementById("errorlname").innerHTML = 'Please type your Last Name'; erroravailable = 'yes'; return false; } else if (!!fname) { document.getElementById("lname").className = "success incorrect"; document.getElementById("errorlname").className = "success"; document.getElementById("errorlname").innerHTML = 'Success'; erroravailable = 'no'; } if (isNaN(mobile) == true || mobile.length != 10) { document.getElementById("mobile").className = "error incorrect"; document.getElementById("errormobile").className = "error"; document.getElementById("errormobile").innerHTML = 'Please type your 10 digit mobile no.'; erroravailable = 'yes'; return false; } else if (!!mobile) { document.getElementById("mobile").className = "success incorrect"; document.getElementById("errormobile").className = "success"; document.getElementById("errormobile").innerHTML = 'Success'; erroravailable = 'no'; } var mailformat = /^\\w+([\\.-]?\\w+)*@\\w+([\\.-]?\\w+)*(\\.\\w{2,3})+$/; if(email.match(mailformat)) { document.getElementById("email").className = "success incorrect"; document.getElementById("erroremail").className = "success"; document.getElementById("erroremail").innerHTML = 'Success'; erroravailable = 'no'; }else{ document.getElementById("email").className = "error incorrect"; document.getElementById("erroremail").className = "error"; document.getElementById("erroremail").innerHTML = 'Please type your valid email address'; erroravailable = 'yes'; return false; } if(password1.length > 5 && password1.length <13) { document.getElementById("password1").className = "success incorrect"; document.getElementById("errorpass1").className = "success"; document.getElementById("errorpass1").innerHTML = 'Success'; erroravailable = 'no'; } else { document.getElementById("password1").className = "error incorrect"; document.getElementById("errorpass1").className = "error"; document.getElementById("errorpass1").innerHTML = 'Please type your 6 to 12 Characters Password'; erroravailable = 'yes'; return false; } if(password2 == password1) { document.getElementById("password2").className = "success incorrect"; document.getElementById("errorpass2").className = "success"; document.getElementById("errorpass2").innerHTML = 'Success'; erroravailable = 'no'; } else{ document.getElementById("password2").className = "error incorrect"; document.getElementById("errorpass2").className = "error"; document.getElementById("errorpass2").innerHTML = 'Password Mismatch!'; erroravailable = 'yes'; return false; } $("#register").click(function() { if(erroravailable == "no") // if no error found and submit form // document.registerform.submit(); document.getElementById("registerform").submit(); return true; }); // alert("status"+erroravailable+""); /* if(document.getElementById("errorfname", "errorlname", "errormobile", "erroremail", "errorpass1", "errorpass2").innerHTML == "Success") alert("successful"); oneTimeMsgClikced = true; function submitform() { document.registerform.submit(); }*/ } 

 .hide( display:none; } 

 <form class="type_2" method="post" id="registerform" action="<?php echo $path; ?>customer_registration.php" enctype="multipart/form-data"> <section id="showregister" class="section_offset"> <h3>2. Registration Information</h3> <div class="theme_box"> <ul> <li class="row"> <div class="col-sm-6"> <label for="fname" class="required">First Name</label> <input type="text" class="incorrect" name="fname" id="fname" onBlur="requiredFields()"> <span id="errorfname" class="hide">Please Type your First Name</span> </div><!--/ [col] --> <div class="col-sm-6"> <label for="lname" class="required">Last Name</label> <input type="text" class="incorrect" name="lname" id="lname" onBlur="requiredFields()"> <span id="errorlname" class="hide">Please Type your Last Name</span> </div><!--/ [col] --> </li><!--/ .row --> <li class="row"> <div class="col-sm-6"> <label for="mobile" class="required">Mobile No</label> <input type="text" class="incorrect" name="mobile" id="mobile" onBlur="requiredFields()"> <span id="errormobile" class="hide">Please type your 10 digit mobile no.</span> </div><!--/ [col] --> <div class="col-sm-6"> <label for="email" class="required">Email Address</label> <input type="text" class="incorrect" name="email" id="email" onBlur="requiredFields()"> <span id="erroremail" class="hide">Please type valid Email address.</span> </div><!--/ [col] --> </li><!--/ .row --> <li class="row"> <div class="col-sm-6"> <label for="password1" class="required">Password</label> <input type="password" class="incorrect" name="password1" id="password1"> <span id="errorpass1" class="hide">Please type Min 6 to 12 characters.</span> </div><!--/ [col] --> <div class="col-sm-6"> <label for="password2" class="required">Confirm Password</label> <input type="password" class="incorrect" name="password2" id="password2"> <span id="errorpass2" class="hide">Password Mismatch!.</span> </div><!--/ [col] --> </li><!--/ .row --> </ul> </div> <footer class="bottom_box on_the_sides"> <div class="left_side"> <button id="register" class="button_blue middle_btn">Register Now</button> </div> <div class="right_side"> <span class="prompt">Required Fields</span> </div> </footer> </section> </form> 

Answer 1

use jquery validate plugin rather your lines of code will also decrease and its easy to integrate especially with the above form. check this demo

Answer 2

I want minimize my javascript code, also need to apply prevent form submission if error is not cleared.

for this question I would suggest you to use Angular JS with

$scope.$watch = myFunction(){} 

on the form to check for the validation errors and should also return false to the ngDiabled for submit button if the all the validations are successful.