2016-12-09 177 views
1

我想驗證模態中的名字和姓氏輸入字段。如果它是空的,它將傳遞一條消息「該字段是必需的!」紅色着色。驗證模態中的輸入字段

我面臨的問題是我的腳本沒有驗證字段。

請幫忙。

$(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 "> \t \t \t \t \t \t 
 
           <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" /> \t 
 
             </div> 
 
             <div class="col-md-4"> 
 
              <span class="requiredField" id="firstNameRequired" style="display:none;">This field is Required!</span> 
 
             </div> 
 
            </div> \t \t 
 
            <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" /> \t 
 
             </div> 
 
             <div class="col-md-4"> 
 
              <span class="requiredField" id="lastNameRequired" style="display:none;">This field is Required!</span> 
 
             </div> 
 
            </div> \t \t 
 
            <div style="text-align: center;"> 
 
             <button id="btn" type="submit" class="btn btn-default">Submit</button> 
 
            </div> 
 
           </form> \t \t \t \t \t \t \t 
 
          </div> 
 
         </div> 
 
        </div> 
 
       </div> 
 
      </div> 
 
     </body> 
 
     </html> 
 
     </body> 
 
    </html>

回答

1

您正在創建一個二維數組,沒必要的,只是聲明一樣var fieldIDArray = [$('#firstName'), $('#lastName')];var spanIDArray = [$('#firstNameRequired'),$('#lastNameRequired')];

工作片段:

$(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(); 
 
     } 
 
    } 
 
    }); 
 
});
.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=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>