Question

我是Jquery的新手。我正在尝试为所有输入使用相同的类属性验证五个输入字段。我无法使用'this selector'验证。请帮助我Thnx提前。如果你想我可以提供代码

<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
});

Answer 1

您可以使用jquery通过each来实现。试试这样吧

$(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'>

如何在jquery中使用'this'选择器验证输入字段

1 个答案: