表单验证选择字段未验证

Question

我正在使用jquery验证表单。问题是电话号码，选择字段未验证如果字段为空则不会显示错误消息。其他字段工作正常。这是正确的方法我是什么在做什么？

任何人都可以告诉脚本有什么问题吗？

有没有其他方法建议我。

$(document).ready(function() {
	
	/* name*/	
	$('#contact_name').on('input', function() {
		var input=$(this);
		var is_name=input.val();
		if(is_name){
			input.removeClass("invalid").addClass("valid");
		}
		else{
			input.removeClass("valid").addClass("invalid");
		}
	});
		
	/* E-mail */	
	$('#contact_email').on('input', function() {
		var input=$(this);
		var re = /^[a-zA-Z0-9.!#$%&'*+/=?^_`{|}~-]+@[a-zA-Z0-9-]+(?:\.[a-zA-Z0-9-]+)*$/;
		var is_email=re.test(input.val());
		if(is_email){
			input.removeClass("invalid").addClass("valid");
		}
		else{
			input.removeClass("valid").addClass("invalid");
		}
	});

	/* Phone */	
	$('#contact_ph').on('input', function() {
		var input=$(this);
		var ph_regex =  /^\(?([0-9]{3})\)?[-. ]?([0-9]{3})[-. ]?([0-9]{4})$/;
		var is_phone=ph_regex.test(input.val());
		if(is_phone){
			input.removeClass("invalid").addClass("valid");
		}
		else{
			input.removeClass("valid").addClass("invalid");
		}
	});

	/* select People*/
	$('#contact_select').on('select', function() {
		var input=$(this);
		var selectOption =  $("#contact_select option:selected");
		var is_select=selectOption.test(select.val());
		if(is_select){
			input.removeClass("invalid").addClass("valid");
		}
		else{
			input.removeClass("valid").addClass("invalid");
		}
	});

	/* select Time*/
	$('#contact_time').on('select', function() {
		var input=$(this);
		var selectTime =  $("#contact_time option:selected");
		var is_time=selectTime.test(select.val());
		if(is_time){
			input.removeClass("invalid").addClass("valid");
		}
		else{
			input.removeClass("valid").addClass("invalid");
		}
	});

	/* message*/
	$('#contact_message').keyup(function(event) {
		var input=$(this);
		var message=$(this).val();
		console.log(message);
		if(message){
			input.removeClass("invalid").addClass("valid");
		}
		else{
			input.removeClass("valid").addClass("invalid");
		} 
	});
	
	 /* Submit */
	$("#contact_submit button").click(function(event){
		var form_data=$("#contact").serializeArray();
		var error_free=true;
		for (var input in form_data){
			var element=$("#contact_"+form_data[input]['name']);
			var valid=element.hasClass("valid");
			var error_element=$("span", element.parent());
			if (!valid){
				error_element.removeClass("error").addClass("error_show"); error_free=false;
			}
			else{
				error_element.removeClass("error_show").addClass("error");
			}
		}
		if (!error_free){
			event.preventDefault(); 
		}
		else{
			$('.success_msg').css('display','block');
		}
	});
	  
});

#contact label{
	display: inline-block;
	width: 130px;
	text-align: right;
}
#contact_submit{
	padding-left: 100px;
}
#contact div{
	margin-top: 1em;
}
textarea{
	vertical-align: top;
	height: 5em;
	outline: none;
}
span.error{
	display: none;
	margin-left: 10px;
	color: red;
}		
span.error_shown {
	color: red;
	margin-left: 10px;
}
input.invalid, 
textarea.invalid,
select.invalid {
	border: 2px solid red;
}
input:focus {
    outline-width: 0;
}
input.valid, 
textarea.valid,
select.valid {
	border: 2px solid green;
}
.success_msg {
	display: none;
	width: 600px;
	height: 40px;
	border: 1px solid green;
	border-radius: 5px;
	background-color: rgba(213, 255, 187, 0.7);;

}
input[type=number]::-webkit-inner-spin-button, 
input[type=number]::-webkit-outer-spin-button { 
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    margin: 0; 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="success_msg">
		<p>Form submitted Successfully</p>
	</div>
	<form id="contact" method="post" action="">
		<div>
			<label for="contact_name">Name:</label>
			<input type="text" id="contact_name" name="name"></input>
			<span class="error">This field is required</span>
		</div>
		<div>
			<label for="contact_email">Email:</label>
			<input type="email" id="contact_email" name="email"></input>
			<span class="error">A valid email address is required</span>				
		</div>
		<div>
			<label for="contact_ph">Phone:</label>
			<input type="number" id="contact_ph" name="phone"></input>
			<span class="error">A valid Phone number is required</span>				
		</div>
		<div>
			<label for="contact_select">Number of People</label>
			<select id="contact_select">
				<option value="">select number of people</option>
				<option value="1">1</option>
				<option value="2">2</option>
				<option value="3">3</option>
				<option value="4">4</option>
				<option value="5">5</option>
				<option value="6">6</option>
				<option value="7">7</option>
				<option value="8">8</option>
				<option value="9">9</option>
			</select>
			<span class="error">Select option</span>			
		</div>
		<div>
			<label for="contact_time">Time</label>
			<select id="contact_time">
				<option value="">select Time</option>
				<option value="00:00">00:00</option>
				<option value="00:15">00:15</option>
				<option value="00:30">00:30</option>
				<option value="00:45">00:45</option>
				<option value="01:00">01:00</option>
				<option value="01:15">01:15</option>
				<option value="01:30">01:30</option>
				<option value="01:45">01:45</option>
				<option value="02:00">02:00</option>
			</select>
			<span class="error">Select Time option</span>			
		</div>					
		<div>
			<label for="contact_message">Message:</label>
			<textarea id="contact_message" name="message"></textarea>
			<span class="error">This field is required</span>												
		</div>					
		<div id="contact_submit">				
			<button type="submit">Submit</button>
		</div>
	</form>

Answer 1

代码中的以下行将字符串联系人与字段的名称属性进行汇总。然后，您的电话字段名称应为contact_phone而不是contact_ph。同样，通过正确添加name和id属性来检查选择字段。

var element=$("#contact_"+form_data[input]['name']);

对于选择类型，事件应为change而不是select。还要检查select事件处理程序中的代码。

Answer 2

您必须将Contact_ph更改为Contact_phone。它会工作。 此外，您还必须相应地对JS文件进行更改。 请在下面找到更新的模板和JS文件

＆＃13;

＆＃13;

$(document).ready(function() {
	
	/* name*/	
	$('#contact_name').on('input', function() {
		var input=$(this);
		var is_name=input.val();
		if(is_name){
			input.removeClass("invalid").addClass("valid");
		}
		else{
			input.removeClass("valid").addClass("invalid");
		}
	});
		
	/* E-mail */	
	$('#contact_email').on('input', function() {
		var input=$(this);
		var re = /^[a-zA-Z0-9.!#$%&'*+/=?^_`{|}~-]+@[a-zA-Z0-9-]+(?:\.[a-zA-Z0-9-]+)*$/;
		var is_email=re.test(input.val());
		if(is_email){
			input.removeClass("invalid").addClass("valid");
		}
		else{
			input.removeClass("valid").addClass("invalid");
		}
	});

	/* Phone */	
	$('#contact_phone').on('input', function() {
		var input=$(this);
		var ph_regex =  /^\(?([0-9]{3})\)?[-. ]?([0-9]{3})[-. ]?([0-9]{4})$/;
		var is_phone=ph_regex.test(input.val());
		if(is_phone){
			input.removeClass("invalid").addClass("valid");
		}
		else{
			input.removeClass("valid").addClass("invalid");
		}
	});

	/* select People*/
	$('#contact_select').on('select', function() {
		var input=$(this);
		var selectOption =  $("#contact_select option:selected");
		var is_select=selectOption.test(select.val());
		if(is_select){
			input.removeClass("invalid").addClass("valid");
		}
		else{
			input.removeClass("valid").addClass("invalid");
		}
	});

	/* select Time*/
	$('#contact_time').on('select', function() {
		var input=$(this);
		var selectTime =  $("#contact_time option:selected");
		var is_time=selectTime.test(select.val());
		if(is_time){
			input.removeClass("invalid").addClass("valid");
		}
		else{
			input.removeClass("valid").addClass("invalid");
		}
	});

	/* message*/
	$('#contact_message').keyup(function(event) {
		var input=$(this);
		var message=$(this).val();
		console.log(message);
		if(message){
			input.removeClass("invalid").addClass("valid");
		}
		else{
			input.removeClass("valid").addClass("invalid");
		} 
	});
	
	 /* Submit */
	$("#contact_submit button").click(function(event){
		var form_data=$("#contact").serializeArray();
		var error_free=true;
		for (var input in form_data){
			var element=$("#contact_"+form_data[input]['name']);
			var valid=element.hasClass("valid");
			var error_element=$("span", element.parent());
			if (!valid){
				error_element.removeClass("error").addClass("error_show"); error_free=false;
			}
			else{
				error_element.removeClass("error_show").addClass("error");
			}
		}
		if (!error_free){
			event.preventDefault(); 
		}
		else{
			$('.success_msg').css('display','block');
		}
	});
	  
});

＆＃13;

＆＃13;

＆＃13;

＆＃13;

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="data.js"></script>
 <link rel="stylesheet" type="text/css" href="design.css">
<div class="success_msg">
		<p>Form submitted Successfully</p>
	</div>
	<form id="contact" method="post" action="">
		<div>
			<label for="contact_name">Name:</label>
			<input type="text" id="contact_name" name="name"></input>
			<span class="error">This field is required</span>
		</div>
		<div>
			<label for="contact_email">Email:</label>
			<input type="email" id="contact_email" name="email"></input>
			<span class="error">A valid email address is required</span>				
		</div>
		<div>
			<label for="contact_phone">Phone:</label>
			<input type="number" id="contact_phone" name="phone"></input>
			<span class="error">A valid Phone number is required</span>				
		</div>
		<div>
			<label for="contact_select">Number of People</label>
			<select id="contact_select">
				<option value="">select number of people</option>
				<option value="1">1</option>
				<option value="2">2</option>
				<option value="3">3</option>
				<option value="4">4</option>
				<option value="5">5</option>
				<option value="6">6</option>
				<option value="7">7</option>
				<option value="8">8</option>
				<option value="9">9</option>
			</select>
			<span class="error">Select option</span>			
		</div>
		<div>
			<label for="contact_time">Time</label>
			<select id="contact_time">
				<option value="">select Time</option>
				<option value="00:00">00:00</option>
				<option value="00:15">00:15</option>
				<option value="00:30">00:30</option>
				<option value="00:45">00:45</option>
				<option value="01:00">01:00</option>
				<option value="01:15">01:15</option>
				<option value="01:30">01:30</option>
				<option value="01:45">01:45</option>
				<option value="02:00">02:00</option>
			</select>
			<span class="error">Select Time option</span>			
		</div>					
		<div>
			<label for="contact_message">Message:</label>
			<textarea id="contact_message" name="message"></textarea>
			<span class="error">This field is required</span>												
		</div>					
		<div id="contact_submit">				
			<button type="submit">Submit</button>
		</div>
	</form>

＆＃13;

＆＃13;

＆＃13;