堆栈内存溢出
  简体   繁体   English

如何在jQuery中使用“ this”选择器验证输入字段

[英]how to validate input fields using 'this' selector in jquery

 原文  2017-07-13 10:03:44  0   1    jquery

问题描述

I am new to Jquery. 我是Jquery新手。 I am trying to validate five input fields using same class attribute for all inputs. 我正在尝试对所有输入使用相同的class属性来验证五个输入字段。 I am unable to validate using 'this selector'. 我无法使用“此选择器”进行验证。 Please assist me. 请帮我。 Thnx in advance. 提前thnx。 If you want I can provide with the code 如果您愿意，我可以提供代码 

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

1 个解决方案

解决方案1
 0  2017-07-13 10:09:35

You can achieve by each using jquery. 您可以使用jquery each实现。 Try like this 这样尝试 

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

暂无
暂无

声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.

相关问题 如何使用jquery验证插件验证名称中带点的输入字段？ - How to validate input fields with a dot in name using the jquery validation plugin? 使用jquery验证表单输入字段 - Validate form input fields using jquery 如何使用jQuery验证多个相同的输入字段？ - How to validate multiple identical input fields with jQuery? 如何验证输入字段？ - How to validate input fields? 验证动态输入字段jQuery - Validate Dynamic Input Fields Jquery jQuery验证文本输入字段 - jQuery validate text input fields 如何使用jQuery验证JSP密码字段？ - how to validate jsp password fields using jQuery? 如何使用jquery验证动态表单字段？ - How to validate dynamic form fields using jquery? 如何使用jQuery验证插件验证字段 - how validate fields using jquery validation plugin 验证onchange输入字段jQuery验证插件 - Validate onchange input fields jQuery Validate plugin
相关标签
 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM