验证模态

时间：2016-12-09 00:40:47

标签： javascript jquery html validation

我想在模态中验证我的名字和姓氏输入字段。如果它是空的，它将跨越一条消息“该字段是必需的！”红色。

我遇到的问题是我的脚本没有验证字段。

请帮忙。 

$(document).ready(function() {
    $('#btn').click(function(e) {
        var fieldIDArray = [$('#firstName', '#lastName')];
        var spanIDArray = [$('#firstNameRequired',
            '#lastNameRequired')];
        for (i = 0; i < fieldIDArray.length; i++) {
            if (!fieldIDArray[i].val()) {
                e.preventDefault();
                fieldIDArray[i].closest('.form-group')
                    .removeClass('has-success').addClass(
                        'has-error');
                spanIDArray[i].show();
            } else {
                fieldIDArray[i].closest('.form-group')
                    .removeClass('has-error').addClass(
                        'has-success');
                spanIDArray[i].hide();
            }
        }
    });
});
.requiredField {
    color: red;
}
<!DOCTYPE html>
    <html>
       <head>
          <title>Modal FOrm</title>
          <meta charset="utf-8">
          <meta name="viewport" content="width=device-width, initial-scale=1">
          <link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
          <script
             src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script>
          <script
             src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
           <script src="js/form-validation.js"></script>
          <link rel="stylesheet" type="text/css" href="css/style.css">
       </head>
       <body>

            <!DOCTYPE html>
        <html>
        <head>
        <title>J2EE</title>
        <meta charset="utf-8">
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
        <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script>
        <script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
        <script src="../../js/applicantFormValidation.js"></script>
        <link rel="stylesheet" type="text/css" href="../../css/style.css">
        </head>
        <body>
            <a href="# " data-toggle="modal"
                            data-target="#RegFormModal" class="underline inputLabel">
                                Open Form Modal</a>
            <div class="container">
                <!-- Modal -->
                <div class="modal fade" id="RegFormModal" tabindex="-1" role="dialog"
                    aria-labelledby="myModalLabel" aria-hidden="true">
                    <div class="modal-dialog">
                        <div class="modal-content">
                            <!-- Modal Header -->
                            <div class="modal-header">
                                <button type="button" class="close" data-dismiss= modal>
                                    <span aria-hidden="true">&times;</span> <span class="sr-only ">Close</span>
                                </button>
                                <h4 class="modal-title" id="myModalLabel ">My Modal</h4>
                            </div>
                            <!-- Modal Body -->
                            <div class="modal-body ">						
                                <form id="applicationForm" name="applicationForm" role="form">
                                    <!--action="ApplicationFormCheck" method="POST"> -->
                                    <div class="form-group row">
                                        <label for="firstName" class="col-md-2">First Name</label>
                                        <div class="col-md-4">
                                            <input type="text" class="form-control" id="firstName"
                                                placeholder="Enter First Name" name="firstName" />	
                                        </div>
                                        <div class="col-md-4">
                                            <span class="requiredField" id="firstNameRequired" style="display:none;">This field is Required!</span>
                                        </div>
                                    </div>		
                                    <div class="form-group row">
                                        <label for="lastName" class="col-md-2">First Name</label>
                                        <div class="col-md-4">
                                            <input type="text" class="form-control" id="lastName"
                                                placeholder="Enter Last Name" name="lastName" />	
                                        </div>
                                        <div class="col-md-4">
                                            <span class="requiredField" id="lastNameRequired" style="display:none;">This field is Required!</span>
                                        </div>
                                    </div>		
                                    <div style="text-align: center;">
                                        <button id="btn" type="submit" class="btn btn-default">Submit</button>
                                    </div>
                                </form>							
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </body>
        </html>
       </body>
    </html>

1 个答案:

答案 0 :(得分：1)

您正在创建一个二维数组，不需要像var fieldIDArray = [$('#firstName'), $('#lastName')];和var spanIDArray = [$('#firstNameRequired'),$('#lastNameRequired')];

那样声明

工作片段：

＆＃13;
＆＃13; 
$(document).ready(function() {
  $('#btn').click(function(e) {
    var fieldIDArray = [$('#firstName'), $('#lastName')]; //fix here
    var spanIDArray = [$('#firstNameRequired'),
      $('#lastNameRequired')
    ]; //fix here
    for (i = 0; i < fieldIDArray.length; i++) {
      if (!fieldIDArray[i].val().length) {
        e.preventDefault();
        fieldIDArray[i].closest('.form-group')
          .removeClass('has-success').addClass(
            'has-error');
        spanIDArray[i].show();
      } else {
        fieldIDArray[i].closest('.form-group')
          .removeClass('has-error').addClass(
            'has-success');
        spanIDArray[i].hide();
      }
    }
  });
});
＆＃13; 
.requiredField {
  color: red;
}
＆＃13; 
<!DOCTYPE html>
<html>

<head>
  <title>Modal FOrm</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script>
  <script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
  <script src="js/form-validation.js"></script>
  <link rel="stylesheet" type="text/css" href="css/style.css">
</head>

<body>

  <!DOCTYPE html>
  <html>

  <head>
    <title>J2EE</title>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script>
    <script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
    <script src="../../js/applicantFormValidation.js"></script>
    <link rel="stylesheet" type="text/css" href="../../css/style.css">
  </head>

  <body>
    <a href="# " data-toggle="modal" data-target="#RegFormModal" class="underline inputLabel">
                                Open Form Modal</a>
    <div class="container">
      <!-- Modal -->
      <div class="modal fade" id="RegFormModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
        <div class="modal-dialog">
          <div class="modal-content">
            <!-- Modal Header -->
            <div class="modal-header">
              <button type="button" class="close" data-dismiss=m odal>
                <span aria-hidden="true">&times;</span>  <span class="sr-only ">Close</span>
              </button>
              <h4 class="modal-title" id="myModalLabel ">My Modal</h4>
            </div>
            <!-- Modal Body -->
            <div class="modal-body ">
              <form id="applicationForm" name="applicationForm" role="form">
                <!--action="ApplicationFormCheck" method="POST"> -->
                <div class="form-group row">
                  <label for="firstName" class="col-md-2">First Name</label>
                  <div class="col-md-4">
                    <input type="text" class="form-control" id="firstName" placeholder="Enter First Name" name="firstName" />
                  </div>
                  <div class="col-md-4">
                    <span class="requiredField" id="firstNameRequired" style="display:none;">This field is Required!</span>
                  </div>
                </div>
                <div class="form-group row">
                  <label for="lastName" class="col-md-2">First Name</label>
                  <div class="col-md-4">
                    <input type="text" class="form-control" id="lastName" placeholder="Enter Last Name" name="lastName" />
                  </div>
                  <div class="col-md-4">
                    <span class="requiredField" id="lastNameRequired" style="display:none;">This field is Required!</span>
                  </div>
                </div>
                <div style="text-align: center;">
                  <button id="btn" type="submit" class="btn btn-default">Submit</button>
                </div>
              </form>
            </div>
          </div>
        </div>
      </div>
    </div>
  </body>

  </html>
</body>

</html>
＆＃13;
＆＃13;
＆＃13;

相关问题
最新问题