我是Jquery的新手。我正在尝试对所有输入使用相同的类属性验证五个输入字段。我无法使用"此选择器"进行验证。请协助我。提前感谢。如果你愿意，我可以提供代码
<body>
<div>
<div>
<h3>Modal Registration Form</h3>
</div>
<div>
<button class="btn btn-primary" data-toggle="modal" data-target="#dialog-example">
Register Here
</button>
</div>
</div>
<div id="dialog-example" class="modal fade" role="dialog" tabindex="-1" aria-labelledby="label-dialog-example" style="display: none;">
<div class="modal-dialog full-screen" role="document">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
<h3 class="modal-title layout_h3" id="label-dialog-example">Registration Form</h3>
</div>
<!--modal body-->
<div class="modal-body">
<!--modal content body-->
<div class="box">
<form action="" method="post">
<div id="header">
<div id="bottom-head"><h2 id="logintoregister">Click to Login</h2></div>
</div>
<div class="header_title1">
<div class="social_networks">
<!--<img src="facebook_logo.png" >
<img src="googleplus.png" >-->
<a href="#" class="fa fa-facebook"></a>
<a href="#" class="fa fa-google"></a>
</div>
<div class="or">
<h4>OR</h4>
<hr>
</div>
</div>
<div class="header_title2">
<div class="profile_pic_div">
<img src="user.png" class="profile_pic" id="1234">
<input class="file-upload" id="1234c" type="file" />
</div>
</div>
<form action="" method="post">
<div class="group">
<input class="inputMaterial" type="text" required id="username_id">
<span class="glyphicon_icon"><i class="glyphicon glyphicon-user"></i></span>
<span class="highlight"></span>
<span class="bar"></span>
<label>Username</label>
<div class="loader" id="loader"></div>
<span id="username_span"></span>
</div>
<div class="group">
<input class="inputMaterial" type="text" required id="email_id" autocomplete="off">
<span class="glyphicon_icon"><i class="glyphicon glyphicon-envelope"></i></span>
<span class="highlight"></span>
<span class="bar"></span>
<label>Email</label>
<div class="loader" id="loader"></div>
<span id="email_span"></span>
</div>
<div class="group" id="staticParent">
<input class="inputMaterial" type="text" maxlength="10" autocomplete="off" required id="mobile_id">
<span class="glyphicon_icon"><i class="glyphicon glyphicon-earphone"></i></span>
<span class="highlight"></span>
<span class="bar"></span>
<label>Mobile Number</label>
<div class="loader" id="loader"></div>
<span id="mobile_span"></span>
</div>
<div class="group">
<input class="inputMaterial" type="text" required id="citycode_id">
<span class="glyphicon_icon"><i class="glyphicon glyphicon-globe"></i></span>
<span class="highlight"></span>
<span class="bar"></span>
<label>City</label>
<div class="loader" id="loader"></div>
<span id="citycode_span"></span>
</div>
<div class="group">
<input class="inputMaterial" type="text" required id="password_id">
<span class="glyphicon_icon"><i class="glyphicon glyphicon-sunglasses"></i></span>
<span class="highlight"></span>
<span class="bar"></span>
<label>Password</label>
<div class="loader" id="loader"></div>
<span id="password_span"></span>
</div>
<button id="buttonlogintoregister" type="submit">Sign Up</button>
<button id="buttonlogintoregister" type="submit">Already have an account, Click here</button>
</form>
</div>
<!--modal content body-->
</div>
<!--modal body-->
</div>
</div>
</div>
<script type="text/javascript" src="float.js"></script>
</body>
jquery:
$(document).ready(function(){
//hiding all span error messages initially
$("#email_span").hide();
$("#password_span").hide();
$("#mobile_span").hide();
$("#select_span").hide();
//hiding all span error messages initially
//declaring variables
var error_email = false;
var error_password = false;
var error_mobile = false;
var error_select = false;
//declaring variables
//assigning events and event handlers
$("#email").focusout(function(){
check_email();
});
$("#password").focusout(function(){
check_password();
});
$("#select").click(function(){
check_select();
});
//assigning events and event handlers
//validating email
function check_email(){
var email=$('#email').val();
var emailReg = /^([w-.]+@([w-]+.)+[w-]{2,4})?$/;
if( !emailReg.test(email)) {
$("#email_span").html("Invalid Email address");
$("#email_span").show();
$("#email").css("backgroundColor","pink");
error_email = true;
}else if(email == ""){
$("#email_span").html("Enter Email address");
$("#email_span").show();
$("#email").css("backgroundColor","pink");
error_email = true;
}
else {
$("#email_span").hide();
$("#email").css("backgroundColor","lightgreen");
}
}
//validating email
//validating password
function check_password(){
var password = $("#password").val();
var password_length = $("#password").val().length;
if((password_length > 0 && password_length < 8) || password_length > 14 ){
$("#password_span").html("Password should be 8-14 characters");
$("#password_span").show();
$("#password").css("backgroundColor","pink");
error_password = true;
}else if(password_length == 0){
$("#password_span").html("Password field is mandatory");
$("#password_span").show();
$("#password").css("backgroundColor","pink");
error_password = true;
}else{
$("#password_span").hide();
$("#password").css("backgroundColor","lightgreen");
}
}
//validating password
//validating mobile
$('#staticParent').on('keydown', '#mobile', function(e){-1!==$.inArray(e.keyCode,
[46,8,9,27,13,110,190])||/65|67|86|88/.test(e.keyCode)&&
(!0===e.ctrlKey||!0===e.metaKey)||35<=e.keyCode&&40>=e.keyCode||
(e.shiftKey||48>e.keyCode||57<e.keyCode)&&
(96>e.keyCode||105<e.keyCode)&&e.preventDefault()
});
$("#mobile").focusout(function(){
var mobile = $("#mobile").val();
var mobile_length = mobile.length;
if(mobile_length == 0 ){
$("#mobile_span").html("mobile field is mandatory");
$("#mobile_span").show();
$("#mobile").css("backgroundColor","pink");
error_mobile = true;
}else if(mobile_length < 10 && mobile_length > 1){
$("#mobile_span").html("mobile number must be 10 digits");
$("#mobile_span").show();
$("#mobile").css("backgroundColor","pink");
error_mobile = true;
}else{
$("#mobile_span").hide();
$("#mobile").css("backgroundColor","lightgreen");
}
});
//validating mobile
//select box validation
function check_select(){
var select;
select = $("#select").val();
if(select == "select"){
$("#select_span").html("Please select your profession");
$("#select_span").show();
$("#select").css("backgroundColor","pink");
error_select = true;
}else{
$("#select").css("backgroundColor","lightgreen");
$("#select_span").hide();
}
}
//select box validation
//validating on submitting the form
$("#sub").click(function(){
error_email = false;
error_password = false;
error_select = false;
check_email();
check_password();
check_select();
if(!(error_email == false && error_password == false && error_select == false) ){
alert("page not submitted")
return false;
}else{
//alert("page submitted");
//return true;
var mobile = $("#mobile").val();
alert(mobile);
$.ajax({
type: 'GET',
url: 'some url'+mobile,
dataType: 'json',
headers: {'accept': "application/json", 'content-type': "application/json"},
success: function(response) {
alert("success");
console.log(response);
}
});
}
});
//validating on submitting the form
});
你可以通过使用jqueryeach来实现。像这样尝试
$(function(){
$('#button').on('click',function(){
$('.validate').each(function(){
if($(this).val() == ''){
alert('Please enter all the fields.');
return false;
}
});
});
});<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type='text' class='validate'><br><br>
<input type='text' class='validate'><br><br>
<input type='text' class='validate'><br><br>
<input type='text' class='validate'><br><br>
<input type='text' class='validate'><br><br>
<input type='button' id='button' value='Submit'>