表单提交的 Javascript 实时验证

Question

重新更新了我的问题， 在从客户端提交表单之前，我正在为我的编码进行实时 javascript 验证，我只想验证我的名字、姓氏、电子邮件 ID、手机（10 位数字）、密码。 我在下面应用了我自己的编码，

错误：1 表单不应该在没有清除错误的情况下提交。 错误：2 减少我的javascript代码，它看起来很大。 错误：3 在输入电子邮件 ID 时，系统应检查电子邮件 ID 是否已注册...通过使用 ajax 检查 请以这种简短的方式纠正并帮助我。这将非常有帮助... 本网站更新： eg：http://indyadeal.com/supermarket/checkout（点击注册并继续）

   
    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

使用 jquery validate 插件而不是您的代码行数也会减少并且它易于集成，尤其是与上述表单。 check this demo

Answer 2

我想最小化我的 javascript 代码，还需要应用防止表单 如果错误未清除则提交。

对于这个问题，我建议你使用 Angular JS 和

$scope.$watch = myFunction(){} 

在表单上检查验证错误，如果所有验证都成功，还应该向ngDiabled 提交按钮返回 false。