使用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验证领域

回答

相关问题