表单验证更改输入值

时间：2018-10-24 16:35:37

标签： javascript jquery html css

我在我的项目中使用Javascript形式表达式进行形式验证。一旦完成验证就没有任何错误，并且在单击“提交”按钮时，该形式应该提交，我需要将提交值更改为“请稍候...”。 我尝试了两种方法。 方法1：通过更改提交值 方法2：使用jQuery隐藏/显示方法 两种方法都不起作用，我也找不到错误。有人可以帮我吗？

/*
// Initialize and add the map
function initMap() {
  // The location of Uluru
  var uluru = {lat: 12.991011, lng: 77.721225};
  // The map, centered at Uluru
  var map = new google.maps.Map(
      document.getElementById('map'), {zoom: 10, center: uluru});
  // The marker, positioned at Uluru
  var marker = new google.maps.Marker({position: uluru, map: map});
}
  */
  

function pagetest(){
	var name= document.getElementById("name").value;
		var filt =  /^[a-zA-Z]+$/;
		if (!name.match(filt)){
			document.getElementById("name").style.borderColor="red";
			document.getElementById("nameerror").innerHTML='Name should not contain any number or special characters';
			document.getElementById("nameerror").style.color='red';
		 }
		else{
			document.getElementById("name").style.borderColor="green";
			document.getElementById("nameerror").innerHTML='valid name';
			document.getElementById("nameerror").style.color='green';
		}
				
	var number=document.getElementById("mobile").value;
		if(number.length!=10)
		  {
			document.getElementById("mobile").style.borderColor="red";
			document.getElementById("moberror").innerHTML="Number should be exactly 10 digits and not less than or more than that";
			document.getElementById("moberror").style.color='red';
		  }
		else
		  {
			document.getElementById("mobile").style.borderColor="green";
			document.getElementById("moberror").innerHTML="valid number";
			document.getElementById("moberror").style.color='green';
		  }

				
	var email = document.getElementById("email").value;
		var filter = /^([a-zA-Z0-9_\.\-])+\@(([a-zA-Z0-9\-])+\.)+([a-zA-Z0-9]{2,3})+$/;
		if (!filter.test(email)) {
			
			document.getElementById("email").style.borderColor="red";
			document.getElementById("emailerror").innerHTML="Please provide a valid email address";
			document.getElementById("emailerror").style.color="red";	
		 }
		else{

			document.getElementById("email").style.borderColor="green";
			document.getElementById("emailerror").innerHTML='valid email address';
			document.getElementById("emailerror").style.color='green';
		}
					
				
	var country= document.getElementById("country").value;
		var filt =  /^[a-zA-Z]+$/;
		if (!country.match(filt)) {
			document.getElementById("country").style.borderColor="red";
			document.getElementById("countryerror").innerHTML='country should not contain any number or special characters';
			document.getElementById("countryerror").style.color='red';
		 }
		else{

			document.getElementById("country").style.borderColor="green";
			document.getElementById("countryerror").innerHTML='Valid Country name';
			document.getElementById("countryerror").style.color='green';
		}
				
	var city= document.getElementById("city").value;
		var filt =  /^[a-zA-Z]+$/;
		if (!city.match(filt)) {
			document.getElementById("city").style.borderColor="red";
			document.getElementById("cityerror").innerHTML='city should not contain any number or special characters';
			document.getElementById("cityerror").style.color='red';
		 }
		else{
			document.getElementById("city").style.borderColor="green";
			document.getElementById("cityerror").innerHTML='Valid city name';
			document.getElementById("cityerror").style.color='green';
		}
				
			/*	var reg = /[^A-Za-z]/;
				if ((reg.test(query) == false) && (query ==""))
				{
                document.getElementById('query').style.borderColor="red";
                document.getElementById('queryerror').innerHTML="This field is required";
				}
				else{
					document.getElementById("query").style.borderColor="green";
					document.getElementById("queryerror").innerHTML ="";
				}*/
			
	var security = document.getElementById("security").value;
	var securitycode = document.getElementById("securitycode").innerHTML;
		if(security ==securitycode){
			document.getElementById("security").style.borderColor="";
			document.getElementById("codeerror").innerHTML="Code matched";
			document.getElementById("codeerror").style.color='green';
		}	
		else{
			document.getElementById("security").style.borderColor="red";
			document.getElementById("codeerror").innerHTML="Code didn't match or emplty";
			document.getElementById("codeerror").style.color='red';
			var val =Math.floor(1000 + Math.random() * 9000);
			document.getElementById("securitycode").innerHTML =val;
			security.focus;
		}
		
	if( (name!="") && (email!="")  && (number!="") && (country!="") && (city!="") && (security!="")) 
				{
					//alert("ok");
					document.getElementById("form_id").submit();//submit() is a predefined function in js.	
          //document.getElementById("").innerHTML='Please wait..';
				}
	}
	
			/*$(document).ready(function(){
				$('form').submit(function(){
					if(validationIsTrue()){
						(":button").css('display':'none');
						('#Button1').css('display':'block');
					}
					else{
						return false;
					}
			});
			});
			
			$("#form_id").on("submit", function(e){
   var $this = $(this);
   if(this.checkValidity()) {
      e.preventDefault();
	  alert('ok');
      //$this.parents(".form-wrap").hide();
      //$(".success-msg").removeClass("hidden")
   }
});
			
	*/
.iframe-container{
    position: relative;
    width: 100%;
    padding-bottom: 56.25%; /* Ratio 16:9 ( 100%/16*9 = 56.25% ) */
}
.iframe-container > *{
    display: block;
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    margin: 0;
    padding: 0;
    height: 100%;
    width: 100%;
}

/* Demo styles */
.iframe-container{
margin-top:50px;
width:100%;
}	
/*form */
	.content{
	background-image:url("contact-us (1).jpg");
	min-height: 380px;
	background-position: center;
	background-repeat: no-repeat;
	background-size: cover;
  	box-shadow: inset 0 0 0 400px rgba(185, 212, 212, 0.35);
  /* Needed to position the navbar */
  
}
.form-group{
	color:white;
}
.no-border {
    border: 0;
    box-shadow: none; /* You may want to include this as bootstrap applies these styles too */
}
.contact{
	color:#BF2626;
	font-weight:bold;
	margin-top:25px;
}
input,textarea{
	margin-left:5px;
}

input:focus{
	background-color:#b9dbe2;
	color:black;
}
label{
	color:black;
	margin-top:4px;
}
.code{
	color:black;
	font-weight:bold;
	margin-left:7px;
}
h3{
	margin-left:-80px;
}
#securitycode{
	color:red;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<!doctype html>
<html>
	<head>
		<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
		<script src="https://code.jquery.com/jquery-3.3.1.js"
  integrity="sha256-2Kok7MbOyxpgUVvAk/HJ2jigOSYS2auK4Pfzbm7uH60="
  crossorigin="anonymous"></script>
		<script src="formvali.js"></script>
		<link rel="stylesheet" href="form.css">
		
	</head>
	<body onsubmit="loginload()">
	<div class="col-sm-12 content">
	<div class="col-sm-1"></div>
	<div class="col-sm-4">
	<h2 class="text-center">
		Fill out this form and we will get back to you<span class="glyphicon glyphicon-hand-right"></span>
	</h2>
	
	
   <!-- <iframe src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d7245780.082381814!2d-88.29713116153964!3d27.53212533124578!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x88c1766591562abf%3A0xf72e13d35bc74ed0!2sFlorida!5e0!3m2!1sen!2s!4v1470659148428" class="img-responsive" frameborder="0" style="border:0" allowfullscreen></iframe>
	-->
	<h3 class="text-center"><strong>Bangalore Office</strong></h3>
	 <iframe src="http://maps.google.com/maps?q=12.987510,77.620491 &z=13&output=embed" width="300" height="200" frameborder="0" style="border:0"></iframe>
	<h3 class="text-center"><strong>Kerala Office</strong></h3>
	<iframe src="http://maps.google.com/maps?q=9.988126,76.295285 &z=13&output=embed" width="300" height="200" frameborder="0" style="border:0"></iframe>
   </div>
	
	
	<div class="col-sm-6" style="line-height:1.45;">
		<h1 class="text-center contact">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;Contact Us</h1>
		<form action="#" method="POST" id="form_id" name="myform">
			<div class="row form-group">
				<div class="col-sm-2"></div>
				<div class="col-sm-1">
					<label>Name</label>
				</div>
				<div class="col-sm-9">
					<input type="text" id="name" class="form-control" placeholder="Enter Your Name">
					<i id="nameerror"></i>
				</div>
			</div><br>
			
			<div class="row form-group">
				<div class="col-sm-2"></div>
				<div class="col-sm-1">
					<label>Mobile</label>
				</div>
				<div class="col-sm-9">
					<input type="text" id="mobile" class="form-control" placeholder="Enter Your Mobile Number">
					<i id="moberror"></i>
				</div>
			</div><br>
			
			<div class="row form-group">
				<div class="col-sm-2"></div>
				<div class="col-sm-1">
					<label style="margin-left:0px;">Email </label>
				</div>
				<div class="col-sm-9">		
					<input type="email" id="email" class="form-control"placeholder="Enter Your Email Id">
						<i id="emailerror"></i>
				</div>
			</div><br>
					
			<div class="row form-group">
				<div class="col-sm-2"></div>
				<div class="col-sm-1">
					<label>Country</label>
				</div>
				<div class="col-sm-9">
					<input type="text" id="country" class="form-control" placeholder="Enter Your Country Name">
					<i id="countryerror"></i>
				</div>
			</div><br>
		
			<div class="row form-group">
				<div class="col-sm-2"></div>
				<div class="col-sm-1">
					<label>City</label>
				</div>
				<div class="col-sm-9">
					<input type="text" id="city" class="form-control"placeholder="Enter Your City Name">
					<i id="cityerror"></i>
				</div>
			</div><br>
			
			<div class="row form-group">
				<div class="col-sm-2"></div>
				<div class="col-sm-1">
					<label>Query</label>
				</div>
				<div class="col-sm-9">
					<textarea type="text" class="form-control" id="query"placeholder="Enter Your Query here(optional)"></textarea>
					<i id="queryerror"></i>
				</div>
			</div>
			
			<div class="row form-group">
				<div class="col-sm-1"></div>
				<div class="col-sm-2"></div>
				<div class="col-sm-6">
					<span class="code"></strong>Security Code <span id="securitycode"></span></span>
					<input type="number" id="security" class="form-control" placeholder="Enter the security code">
					<i id="codeerror"></i><br>
					<div class="form-group text-center">
						<div class="col-sm-2"></div>
						<input type="button" class="btn btn-warning" name="sub" value="Submit" onclick="pagetest()"/>
						<button id="Button1" style="display:none;">Please wait..</button>
						
					</div>
						
				</div>
			</div>
		</div>
		</form>
		
		<script>
		
			var val =Math.floor(1000 + Math.random() * 9000);
			document.getElementById("securitycode").innerHTML = val;
		</script>
		<script async defer
    src="https://maps.googleapis.com/maps/api/js?key=AIzaSyCXRmYpTXDBP7vdQ-2fy11OqoKGUuGfcxI&callback=initMap">
    </script>
</body>
</html>

2 个答案:

答案 0 :(得分：0)

使用下面的此函数代码替换您的pagetest()函数，然后进行检查，在验证检查之后，我在这里使用jQuery调用：

function pagetest(){
    var name= document.getElementById("name").value;
        var filt =  /^[a-zA-Z]+$/;
        if (!name.match(filt)){
            document.getElementById("name").style.borderColor="red";
            document.getElementById("nameerror").innerHTML='Name should not contain any number or special characters';
            document.getElementById("nameerror").style.color='red';
         }
        else{
            document.getElementById("name").style.borderColor="green";
            document.getElementById("nameerror").innerHTML='valid name';
            document.getElementById("nameerror").style.color='green';
        }

    var number=document.getElementById("mobile").value;
        if(number.length!=10)
          {
            document.getElementById("mobile").style.borderColor="red";
            document.getElementById("moberror").innerHTML="Number should be exactly 10 digits and not less than or more than that";
            document.getElementById("moberror").style.color='red';
          }
        else
          {
            document.getElementById("mobile").style.borderColor="green";
            document.getElementById("moberror").innerHTML="valid number";
            document.getElementById("moberror").style.color='green';
          }


    var email = document.getElementById("email").value;
        var filter = /^([a-zA-Z0-9_\.\-])+\@(([a-zA-Z0-9\-])+\.)+([a-zA-Z0-9]{2,3})+$/;
        if (!filter.test(email)) {

            document.getElementById("email").style.borderColor="red";
            document.getElementById("emailerror").innerHTML="Please provide a valid email address";
            document.getElementById("emailerror").style.color="red";    
         }
        else{

            document.getElementById("email").style.borderColor="green";
            document.getElementById("emailerror").innerHTML='valid email address';
            document.getElementById("emailerror").style.color='green';
        }


    var country= document.getElementById("country").value;
        var filt =  /^[a-zA-Z]+$/;
        if (!country.match(filt)) {
            document.getElementById("country").style.borderColor="red";
            document.getElementById("countryerror").innerHTML='country should not contain any number or special characters';
            document.getElementById("countryerror").style.color='red';
         }
        else{

            document.getElementById("country").style.borderColor="green";
            document.getElementById("countryerror").innerHTML='Valid Country name';
            document.getElementById("countryerror").style.color='green';
        }

    var city= document.getElementById("city").value;
        var filt =  /^[a-zA-Z]+$/;
        if (!city.match(filt)) {
            document.getElementById("city").style.borderColor="red";
            document.getElementById("cityerror").innerHTML='city should not contain any number or special characters';
            document.getElementById("cityerror").style.color='red';
         }
        else{
            document.getElementById("city").style.borderColor="green";
            document.getElementById("cityerror").innerHTML='Valid city name';
            document.getElementById("cityerror").style.color='green';
        }

            /*  var reg = /[^A-Za-z]/;
                if ((reg.test(query) == false) && (query ==""))
                {
                document.getElementById('query').style.borderColor="red";
                document.getElementById('queryerror').innerHTML="This field is required";
                }
                else{
                    document.getElementById("query").style.borderColor="green";
                    document.getElementById("queryerror").innerHTML ="";
                }*/

    var security = document.getElementById("security").value;
    var securitycode = document.getElementById("securitycode").innerHTML;
        if(security ==securitycode){
            document.getElementById("security").style.borderColor="";
            document.getElementById("codeerror").innerHTML="Code matched";
            document.getElementById("codeerror").style.color='green';
        }   
        else{
            document.getElementById("security").style.borderColor="red";
            document.getElementById("codeerror").innerHTML="Code didn't match or emplty";
            document.getElementById("codeerror").style.color='red';
            var val =Math.floor(1000 + Math.random() * 9000);
            document.getElementById("securitycode").innerHTML =val;
            security.focus;
        }
        $('#Button1').hide();
        $('input[name=sub]').show();
        if( (name!="") && (email!="")  && (number!="") && (country!="") && (city!="") && (security!="")) 
        {
             $('#Button1').show();
             $('input[name=sub]').hide();
             // $('#form_id').submit(); //uncomment if want to submit after validation
        }
    }

答案 1 :(得分：0)

function pagetest(){
	var name= document.getElementById("name").value;
		var filt =  /^[a-zA-Z]+$/;
		if (!name.match(filt)){
			document.getElementById("name").style.borderColor="red";
			document.getElementById("nameerror").innerHTML='Name should not contain any number or special characters';
			document.getElementById("nameerror").style.color='red';
		 }
		else{
			document.getElementById("name").style.borderColor="green";
			document.getElementById("nameerror").innerHTML='valid name';
			document.getElementById("nameerror").style.color='green';
		}
				
	var number=document.getElementById("mobile").value;
		if(number.length!=10)
		  {
			document.getElementById("mobile").style.borderColor="red";
			document.getElementById("moberror").innerHTML="Number should be exactly 10 digits and not less than or more than that";
			document.getElementById("moberror").style.color='red';
		  }
		else
		  {
			document.getElementById("mobile").style.borderColor="green";
			document.getElementById("moberror").innerHTML="valid number";
			document.getElementById("moberror").style.color='green';
		  }

				
	var email = document.getElementById("email").value;
		var filter = /^([a-zA-Z0-9_\.\-])+\@(([a-zA-Z0-9\-])+\.)+([a-zA-Z0-9]{2,3})+$/;
		if (!filter.test(email)) {
			
			document.getElementById("email").style.borderColor="red";
			document.getElementById("emailerror").innerHTML="Please provide a valid email address";
			document.getElementById("emailerror").style.color="red";	
		 }
		else{

			document.getElementById("email").style.borderColor="green";
			document.getElementById("emailerror").innerHTML='valid email address';
			document.getElementById("emailerror").style.color='green';
		}
					
				
	var country= document.getElementById("country").value;
		var filt =  /^[a-zA-Z]+$/;
		if (!country.match(filt)) {
			document.getElementById("country").style.borderColor="red";
			document.getElementById("countryerror").innerHTML='country should not contain any number or special characters';
			document.getElementById("countryerror").style.color='red';
		 }
		else{

			document.getElementById("country").style.borderColor="green";
			document.getElementById("countryerror").innerHTML='Valid Country name';
			document.getElementById("countryerror").style.color='green';
		}
				
	var city= document.getElementById("city").value;
		var filt =  /^[a-zA-Z]+$/;
		if (!city.match(filt)) {
			document.getElementById("city").style.borderColor="red";
			document.getElementById("cityerror").innerHTML='city should not contain any number or special characters';
			document.getElementById("cityerror").style.color='red';
		 }
		else{
			document.getElementById("city").style.borderColor="green";
			document.getElementById("cityerror").innerHTML='Valid city name';
			document.getElementById("cityerror").style.color='green';
		}
				
			/*	var reg = /[^A-Za-z]/;
				if ((reg.test(query) == false) && (query ==""))
				{
                document.getElementById('query').style.borderColor="red";
                document.getElementById('queryerror').innerHTML="This field is required";
				}
				else{
					document.getElementById("query").style.borderColor="green";
					document.getElementById("queryerror").innerHTML ="";
				}*/
			
	var security = document.getElementById("security").value;
	var securitycode = document.getElementById("securitycode").innerHTML;
		if(security ==securitycode){
			document.getElementById("security").style.borderColor="";
			document.getElementById("codeerror").innerHTML="Code matched";
			document.getElementById("codeerror").style.color='green';
		}	
		else{
			document.getElementById("security").style.borderColor="red";
			document.getElementById("codeerror").innerHTML="Code didn't match or emplty";
			document.getElementById("codeerror").style.color='red';
			var val =Math.floor(1000 + Math.random() * 9000);
			document.getElementById("securitycode").innerHTML =val;
			security.focus;
		}
		
	if( (name!="") && (email!="")  && (number!="") && (country!="") && (city!="") && (security!="") && (name.match(filt)) && (number.length==10) && (filter.test(email)) && (country.match(filt)) && (city.match(filt)) && (security == securitycode)) 
				{
					alert("ok");
          $('#submit_btn').val("Please wait");
					document.getElementById("form_id").submit();//submit() is a predefined function in js.	
				}
	}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<!doctype html>
<html>
	<head>
		<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
		<script src="formvali.js"></script>
		<link rel="stylesheet" href="form.css">
	</head>
	<body onsubmit="loginload()">
	<div class="col-sm-12 content">
	<div class="col-sm-1"></div>
	<div class="col-sm-4">
	<h2 class="text-center">
		Fill out this form and we will get back to you<span class="glyphicon glyphicon-hand-right"></span>
	</h2>
	
	
   <!-- <iframe src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d7245780.082381814!2d-88.29713116153964!3d27.53212533124578!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x88c1766591562abf%3A0xf72e13d35bc74ed0!2sFlorida!5e0!3m2!1sen!2s!4v1470659148428" class="img-responsive" frameborder="0" style="border:0" allowfullscreen></iframe>
	-->
	<h3 class="text-center"><strong>Bangalore Office</strong></h3>
	 <iframe src="http://maps.google.com/maps?q=12.987510,77.620491 &z=13&output=embed" width="300" height="200" frameborder="0" style="border:0"></iframe>
	<h3 class="text-center"><strong>Kerala Office</strong></h3>
	<iframe src="http://maps.google.com/maps?q=9.988126,76.295285 &z=13&output=embed" width="300" height="200" frameborder="0" style="border:0"></iframe>
   </div>
	
	
	<div class="col-sm-6" style="line-height:1.45;">
		<h1 class="text-center contact">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;Contact Us</h1>
		<form action="" method="POST" id="form_id" name="myform">
			<div class="row form-group">
				<div class="col-sm-2"></div>
				<div class="col-sm-1">
					<label>Name</label>
				</div>
				<div class="col-sm-9">
					<input type="text" id="name" class="form-control" placeholder="Enter Your Name">
					<i id="nameerror"></i>
				</div>
			</div><br>
			
			<div class="row form-group">
				<div class="col-sm-2"></div>
				<div class="col-sm-1">
					<label>Mobile</label>
				</div>
				<div class="col-sm-9">
					<input type="text" id="mobile" class="form-control" placeholder="Enter Your Mobile Number">
					<i id="moberror"></i>
				</div>
			</div><br>
			
			<div class="row form-group">
				<div class="col-sm-2"></div>
				<div class="col-sm-1">
					<label style="margin-left:0px;">Email </label>
				</div>
				<div class="col-sm-9">		
					<input type="email" id="email" class="form-control"placeholder="Enter Your Email Id">
						<i id="emailerror"></i>
				</div>
			</div><br>
					
			<div class="row form-group">
				<div class="col-sm-2"></div>
				<div class="col-sm-1">
					<label>Country</label>
				</div>
				<div class="col-sm-9">
					<input type="text" id="country" class="form-control" placeholder="Enter Your Country Name">
					<i id="countryerror"></i>
				</div>
			</div><br>
		
			<div class="row form-group">
				<div class="col-sm-2"></div>
				<div class="col-sm-1">
					<label>City</label>
				</div>
				<div class="col-sm-9">
					<input type="text" id="city" class="form-control"placeholder="Enter Your City Name">
					<i id="cityerror"></i>
				</div>
			</div><br>
			
			<div class="row form-group">
				<div class="col-sm-2"></div>
				<div class="col-sm-1">
					<label>Query</label>
				</div>
				<div class="col-sm-9">
					<textarea type="text" class="form-control" id="query"placeholder="Enter Your Query here(optional)"></textarea>
					<i id="queryerror"></i>
				</div>
			</div>
			
			<div class="row form-group">
				<div class="col-sm-1"></div>
				<div class="col-sm-2"></div>
				<div class="col-sm-6">
					<span class="code"></strong>Security Code <span id="securitycode"></span></span>
					<input type="number" id="security" class="form-control" placeholder="Enter the security code">
					<i id="codeerror"></i><br>
					<div class="form-group text-center">
						<div class="col-sm-2"></div>
						<input type="button" class="btn btn-warning" name="sub" value="Submit" onclick="pagetest()" id="submit_btn"/>
						<button id="Button1" style="display:none;">Please wait..</button>
						
					</div>
						
				</div>
			</div>
		</div>
		</form>
		<script>
			var val =Math.floor(1000 + Math.random() * 9000);
			document.getElementById("securitycode").innerHTML = val;
		</script>
		<script async defer
    src="https://maps.googleapis.com/maps/api/js?key=AIzaSyCXRmYpTXDBP7vdQ-2fy11OqoKGUuGfcxI&callback=initMap">
    </script>
</body>
</html>

相关问题
最新问题