JavaScript进行实时验证表单提交

Reupdated我的问题，我米做现场JavaScript验证从客户方提交表单之前我的编码，我只是想验证我的名字，姓氏，电子邮件ID，移动（10位），密码。我在下面应用我自己的编码，JavaScript进行实时验证表单提交

错误：1 表单不应提交没有错误清除。错误：2 减少我的javascript代码，它看起来很大。错误：3 在输入电子邮件ID的同时，系统应该检查电子邮件ID是否已经注册...通过使用ajax检查请纠正和帮助我在这个短的way.It将是很大的帮助... 更新于此网站：如：http://indyadeal.com/supermarket/checkout（点击注册并继续）


 
    function requiredFields() { 
 
\t \t 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; 
 
\t 
 
     if (fname == "") { 
 
\t \t document.getElementById("fname").className = "error incorrect"; 
 
\t \t document.getElementById("errorfname").className = "error"; 
 
     document.getElementById("errorfname").innerHTML = 'Please type your First Name'; 
 
\t \t \t erroravailable = yes; \t // if error found return false 
 
\t \t \t return false; \t 
 
     } else if (!!fname) { 
 
\t \t document.getElementById("fname").className = "success incorrect"; 
 
\t \t document.getElementById("errorfname").className = "success"; 
 
     document.getElementById("errorfname").innerHTML = 'Success'; 
 
\t \t \t \t \t erroravailable = 'no'; \t \t 
 

 
     } 
 
\t \t 
 
     if (lname == "") { 
 
\t \t document.getElementById("lname").className = "error incorrect"; 
 
\t \t document.getElementById("errorlname").className = "error"; 
 
     document.getElementById("errorlname").innerHTML = 'Please type your Last Name'; 
 
\t \t \t \t \t erroravailable = 'yes'; \t \t 
 
\t \t \t return false; \t 
 

 
\t \t 
 
     } else if (!!fname) { 
 
\t \t document.getElementById("lname").className = "success incorrect"; 
 
\t \t document.getElementById("errorlname").className = "success"; 
 
     document.getElementById("errorlname").innerHTML = 'Success'; 
 
\t \t \t \t \t erroravailable = 'no'; \t \t 
 
     } 
 

 
if (isNaN(mobile) == true || mobile.length != 10) { 
 
\t \t document.getElementById("mobile").className = "error incorrect"; 
 
\t \t document.getElementById("errormobile").className = "error"; 
 
     document.getElementById("errormobile").innerHTML = 'Please type your 10 digit mobile no.'; 
 
\t \t \t \t \t erroravailable = 'yes'; \t \t 
 
\t \t \t \t \t return false; \t 
 

 
     } else if (!!mobile) { 
 
\t \t document.getElementById("mobile").className = "success incorrect"; 
 
\t \t document.getElementById("errormobile").className = "success"; 
 
     document.getElementById("errormobile").innerHTML = 'Success'; 
 
\t \t \t \t \t erroravailable = 'no'; \t \t 
 
     } 
 
\t \t var mailformat = /^\w+([\.-]?\w+)*@\w+([\.-]?\w+)*(\.\w{2,3})+$/; 
 
\t \t if(email.match(mailformat)) { 
 
\t \t document.getElementById("email").className = "success incorrect"; 
 
\t \t document.getElementById("erroremail").className = "success"; 
 
     document.getElementById("erroremail").innerHTML = 'Success'; 
 
\t \t \t \t \t erroravailable = 'no'; \t \t 
 

 
     }else{ 
 
\t \t document.getElementById("email").className = "error incorrect"; 
 
\t \t document.getElementById("erroremail").className = "error"; 
 
     document.getElementById("erroremail").innerHTML = 'Please type your valid email address'; 
 
\t \t \t \t \t erroravailable = 'yes'; \t 
 
\t \t \t \t \t \t \t \t return false; \t 
 
     } 
 

 
\t \t if(password1.length > 5 && password1.length <13) { 
 
\t \t document.getElementById("password1").className = "success incorrect"; 
 
\t \t document.getElementById("errorpass1").className = "success"; 
 
     document.getElementById("errorpass1").innerHTML = 'Success'; 
 
\t \t \t \t \t erroravailable = 'no'; \t 
 
     } else { 
 
\t \t document.getElementById("password1").className = "error incorrect"; 
 
\t \t document.getElementById("errorpass1").className = "error"; 
 
     document.getElementById("errorpass1").innerHTML = 'Please type your 6 to 12 Characters Password'; 
 
    \t \t \t \t erroravailable = 'yes'; \t \t 
 
\t \t \t return false; \t 
 
     } 
 
\t 
 
\t \t if(password2 == password1) { 
 
\t \t document.getElementById("password2").className = "success incorrect"; 
 
\t \t document.getElementById("errorpass2").className = "success"; 
 
     document.getElementById("errorpass2").innerHTML = 'Success'; 
 
\t \t \t \t \t erroravailable = 'no'; \t 
 
     } else{ 
 
      \t document.getElementById("password2").className = "error incorrect"; 
 
\t \t document.getElementById("errorpass2").className = "error"; 
 
     document.getElementById("errorpass2").innerHTML = 'Password Mismatch!'; 
 
    \t \t \t \t erroravailable = 'yes'; \t 
 
\t \t \t \t \t \t \t return false; \t 
 

 
     } 
 
\t \t $("#register").click(function() { 
 
\t \t if(erroravailable == "no") // if no error found and submit form 
 
// \t \t \t document.registerform.submit(); 
 
\t \t \t document.getElementById("registerform").submit(); 
 
\t \t \t \t return true; 
 
\t \t }); 
 
\t \t 
 
\t \t // alert("status"+erroravailable+""); 
 
/*   if(document.getElementById("errorfname", "errorlname", "errormobile", "erroremail", "errorpass1", "errorpass2").innerHTML == "Success") 
 
       alert("successful"); 
 
       oneTimeMsgClikced = true; 
 
      
 
function submitform() 
 
{ 
 
\t 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"> 
 
\t <h3>2. Registration Information</h3> 
 
\t \t \t \t \t \t \t \t 
 

 
\t \t \t \t \t \t <div class="theme_box"> 
 

 
\t \t \t \t \t \t \t \t 
 
\t \t \t \t \t \t \t \t <ul> 
 
\t \t \t \t \t \t \t \t \t 
 
\t \t \t \t \t \t \t \t \t <li class="row"> 
 
\t \t \t \t \t \t \t \t \t \t 
 
\t \t \t \t \t \t \t \t \t \t <div class="col-sm-6"> 
 
\t \t \t \t <label for="fname" class="required">First Name</label> 
 
\t \t \t \t <input type="text" class="incorrect" name="fname" id="fname" onBlur="requiredFields()"> 
 
       <span id="errorfname" class="hide">Please Type your First Name</span> 
 
</div><!--/ [col] --> 
 

 
\t \t \t \t \t \t \t \t \t \t <div class="col-sm-6"> 
 
\t \t \t \t \t \t \t \t \t \t \t 
 
\t \t \t \t \t \t \t \t \t \t \t <label for="lname" class="required">Last Name</label> 
 
\t \t \t \t <input type="text" class="incorrect" name="lname" id="lname" onBlur="requiredFields()"> 
 
       <span id="errorlname" class="hide">Please Type your Last Name</span> 
 
\t \t \t \t \t \t \t \t \t \t </div><!--/ [col] --> 
 

 
\t \t \t \t \t \t \t \t \t </li><!--/ .row --> 
 

 
\t \t \t \t \t \t \t \t \t <li class="row"> 
 
\t \t \t \t \t \t \t \t \t \t 
 
\t \t \t \t \t \t \t \t \t \t <div class="col-sm-6"> 
 
\t \t \t \t \t \t \t \t \t \t \t 
 
\t \t \t \t \t \t \t \t \t \t \t <label for="mobile" class="required">Mobile No</label> 
 
\t \t \t \t \t \t \t \t \t \t \t <input type="text" class="incorrect" name="mobile" id="mobile" onBlur="requiredFields()"> 
 
       <span id="errormobile" class="hide">Please type your 10 digit mobile no.</span> 
 

 
\t \t \t \t \t \t \t \t \t \t </div><!--/ [col] --> 
 

 
\t \t \t \t \t \t \t \t \t \t <div class="col-sm-6"> 
 
\t \t \t \t \t \t \t \t \t \t \t 
 
\t \t \t \t \t \t \t \t \t \t \t <label for="email" class="required">Email Address</label> 
 
\t \t \t \t \t \t \t \t \t \t \t <input type="text" class="incorrect" name="email" id="email" onBlur="requiredFields()"> 
 
       <span id="erroremail" class="hide">Please type valid Email address.</span> 
 

 
\t \t \t \t \t \t \t \t \t \t </div><!--/ [col] --> 
 

 
\t \t \t \t \t \t \t \t \t </li><!--/ .row --> 
 

 
\t \t \t \t \t \t \t \t \t <li class="row"> 
 

 
\t \t \t \t \t \t \t \t \t \t <div class="col-sm-6"> 
 
\t \t \t \t \t \t \t \t \t \t \t <label for="password1" class="required">Password</label> 
 
\t \t \t \t \t \t \t \t \t \t \t <input type="password" class="incorrect" name="password1" id="password1"> 
 
       <span id="errorpass1" class="hide">Please type Min 6 to 12 characters.</span> 
 
\t \t \t \t \t \t \t \t \t \t </div><!--/ [col] --> 
 

 
\t \t \t \t \t \t \t \t \t \t <div class="col-sm-6"> 
 
\t \t \t \t \t \t \t \t \t \t \t <label for="password2" class="required">Confirm Password</label> 
 
\t \t \t \t \t \t \t \t \t <input type="password" class="incorrect" name="password2" id="password2"> 
 
       <span id="errorpass2" class="hide">Password Mismatch!.</span> 
 
\t \t \t \t \t \t \t \t \t \t </div><!--/ [col] --> 
 

 
\t \t \t \t \t \t \t \t \t </li><!--/ .row --> 
 
\t \t \t \t \t \t \t \t </ul> 
 
    
 
\t \t \t \t \t \t </div> 
 
<footer class="bottom_box on_the_sides"> 
 

 
\t \t \t \t \t \t \t <div class="left_side"> 
 

 
\t \t \t \t \t \t \t \t <button id="register" class="button_blue middle_btn">Register Now</button> 
 

 
\t \t \t \t \t \t \t </div> 
 

 
\t \t \t \t \t \t \t <div class="right_side"> 
 

 
\t \t \t \t \t \t \t \t <span class="prompt">Required Fields</span> 
 

 
\t \t \t \t \t \t \t </div> 
 

 
\t \t \t \t \t \t </footer> 
 
\t \t \t \t \t \t 
 
\t \t \t \t \t \t \t 
 
\t \t \t \t \t </section> 
 
        </form>

来源

2015-12-01 abdul

使用jQuery验证插件，而您的代码行数也将减少其容易与上述形式特别整合。 check this demo

来源

2015-12-01 13:25:01

感谢您的快速回复，但是我已经定制了系统，如果验证成功 – abdul

这将由插件本身处理，我需要将我的class =“error”更改为class =“success”。默认情况下，如果不指定它，它将应用错误类。 –

-2

我想最小化我的javascript代码，如果错误未被清除，还需要应用预防形式提交。

对于这个问题，我建议你使用角度JS与

$scope.$watch = myFunction(){}

的形式来检查验证错误，也应该返回false到ngDiabled因为如果所有的验证提交按钮是成功的。

来源

2015-12-01 16:50:44 dt542

这可能会帮助你实现那个[链接]（http://stackoverflow.com/questions/15899389/angularjs-directive-watch-validity） – dt542

感谢您的回答，请您提供相似的代码样本或请锻炼这并请寄给我.. – abdul

好吧，即时通讯工作。 – dt542

JavaScript进行实时验证表单提交

回答

相关问题