Question

＆＃13;

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

＆＃13;

<!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>
	<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 ">Apply for job
							Position:</h4>
					</div>

					<!-- Modal Body -->
					<div class="modal-body ">
						<form 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-8 ">
									<input type="text" class="form-control" id="firstName"
										placeholder="Enter First Name" name="firstName" />
								</div>
							</div>
							<div class="form-group row">
								<label for="lastName" class="col-md-2">Last Name</label>
								<div class="col-md-8">
									<input type="text" class="form-control" id="lastName"
										placeholder="Last Name" name="lastName" />
								</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>

＆＃13;

我需要编写一个

的jquery

阻止我的模态表单关闭，
验证firstName和lastName输入字段，如果输入字段为空，则会以红色突出显示。

我的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');
            }
        });
    });
});

Answer 1

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

Answer 2

我认为您的选择器: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');
            }
        });
    });
});

使用jquery验证字段

2 个答案: