使用jQuery驗證領域

\t $(document).ready(function() { 
 
\t \t $("#btn").click(function(e) { 
 
\t \t \t e.preventDefault(); 
 
\t \t \t $('input:firstName, input:lastName').blur(function() { 
 
\t \t \t \t var check = $(this).val(); 
 
\t \t \t \t if (check == '') { 
 
\t \t \t \t \t $(this).parent().addClass('has-error'); 
 
\t \t \t \t } else { 
 
\t \t \t \t \t $(this).parent().removeClass('has-error'); 
 
\t \t \t \t } 
 
\t \t \t }); 
 
\t \t }); 
 
\t });

<!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 type="text/javascript" src="js/navbarscroll.js"></script> 
 
<script type="text/javascript" src="assets/js/bootstrap.js"></script> 
 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script> 
 
<script src="../../js/applicantFormValidation.js"></script> 
 
<link rel="stylesheet" type="text/css" href="../../css/style.css"> 
 
</head> 
 
<body> 
 
\t <div class="container"> 
 
\t \t <!-- Modal --> 
 
\t \t <div class="modal fade" id="RegFormModal" tabindex="-1" role="dialog" 
 
\t \t \t aria-labelledby="myModalLabel" aria-hidden="true"> 
 
\t \t \t <div class="modal-dialog"> 
 
\t \t \t \t <div class="modal-content"> 
 
\t \t \t \t \t <!-- Modal Header --> 
 
\t \t \t \t \t <div class="modal-header"> 
 
\t \t \t \t \t \t <button type="button" class="close" data-dismiss="modal"> 
 
\t \t \t \t \t \t \t <span aria-hidden="true">&times;</span> <span class="sr-only ">Close</span> 
 
\t \t \t \t \t \t </button> 
 
\t \t \t \t \t \t <h4 class="modal-title" id="myModalLabel ">Apply for job 
 
\t \t \t \t \t \t \t Position:</h4> 
 
\t \t \t \t \t </div> 
 

 
\t \t \t \t \t <!-- Modal Body --> 
 
\t \t \t \t \t <div class="modal-body "> 
 
\t \t \t \t \t \t <form name="applicationForm" role="form"> 
 
\t \t \t \t \t \t \t <!--action="ApplicationFormCheck" method="POST"> --> 
 
\t \t \t \t \t \t \t <div class="form-group row"> 
 
\t \t \t \t \t \t \t \t <label for="firstName" class="col-md-2">First Name</label> 
 
\t \t \t \t \t \t \t \t <div class="col-md-8 "> 
 
\t \t \t \t \t \t \t \t \t <input type="text" class="form-control" id="firstName" 
 
\t \t \t \t \t \t \t \t \t \t placeholder="Enter First Name" name="firstName" /> 
 
\t \t \t \t \t \t \t \t </div> 
 
\t \t \t \t \t \t \t </div> 
 
\t \t \t \t \t \t \t <div class="form-group row"> 
 
\t \t \t \t \t \t \t \t <label for="lastName" class="col-md-2">Last Name</label> 
 
\t \t \t \t \t \t \t \t <div class="col-md-8"> 
 
\t \t \t \t \t \t \t \t \t <input type="text" class="form-control" id="lastName" 
 
\t \t \t \t \t \t \t \t \t \t placeholder="Last Name" name="lastName" /> 
 
\t \t \t \t \t \t \t \t </div> 
 
\t \t \t \t \t \t \t </div> 
 
\t \t \t \t \t \t \t <div style="text-align: center;"> 
 
\t \t \t \t \t \t \t \t <button id="btn" type="submit" class="btn btn-default">Submit</button> 
 
\t \t \t \t \t \t \t </div> 
 
\t \t \t \t \t \t </form> 
 
\t \t \t \t \t </div> 
 
\t \t \t \t </div> 
 
\t \t \t </div> 
 
\t \t </div> 
 
\t </div> 
 
</body> 
 
</html>

我需要寫一個jQuery是

阻止我從關閉模式窗體，
驗證名字和姓氏輸入字段時，如果輸入字段是空的，它將以紅色突出顯示。

我的jquery代碼的問題是，它不會突出顯示輸入字段爲空時。請幫助

我JQuery的代碼

$(document).ready(function() { 
    $("#btn").click(function(e) { 
     e.preventDefault(); 
     $('input:firstName, input:lastName').blur(function() { 
      var check = $(this).val(); 
      if (check == '') { 
       $(this).parent().addClass('has-error'); 
      } else { 
       $(this).parent().removeClass('has-error'); 
      } 
     }); 
    }); 
});

來源

2016-12-08 user3820292

什麼是「輸入：名字」，‘輸入：名字’選擇？ –

您可以發佈您的代碼演示 –

演示是不工作... –

$(document).ready(function() { 
$("#btn").click(function(e) { 
    e.preventDefault(); 
    $('input:firstName, input:lastName').blur(function() { 
     var check = $(this).val(); 
     if (check == '') { 
      $(this).parent().addClass('input-validation-error'); 
     } else { 
      $(this).parent().removeClass('input-validation-error'); 
     } 
    }); 
    }); 
});

而且使用CSS

.input-validation-error 
    { 
    border: 1px solid #ff0000; 
    background-color: #ffeeee; 
    }

來源

2016-12-08 07:46:49

如果我想使用bootstrap「has-error」類而不是？ – user3820292

has error class only set border-color You必須使用自己的邊框樣式 –

您的解決方案無論如何都不起作用 – user3820292

-1

給屬性您輸入驗證錯誤類我覺得你的選擇:firstName和:lastName是錯誤的。它應該是id選擇器。

$(document).ready(function() { 
    $("#btn").click(function(e) { 
     e.preventDefault(); 
     $('input#firstName, input#lastName').blur(function() { 
      var check = $(this).val(); 
      if (check == '') { 
       $(this).parent().addClass('has-error'); 
      } else { 
       $(this).parent().removeClass('has-error'); 
      } 
     }); 
    }); 
});

來源

2016-12-08 07:52:17

使用jQuery驗證領域

回答

相關問題