我将验证应用于值为空的所有输入。每当任何输入为空并且用户将单击保存按钮时，我们会在小标签中添加类has-error和显示消息。
我写了以下html。
<div class="form-group">
<label class="col-sm-3 control-label">Academic Year *</label>
<div class="col-sm-7"><input type="text" id="academicyearname" maxlength="4" class="form-control only-numbers">
<small id="year_nameHelp" class="text-danger hide">
Academic Year is Required
</small>
</div>
</div>
<div class="form-group" id="dateStartsOn">
<label class="col-sm-3 control-label">Starts On *</label>
<div class="col-sm-7">
<div class="input-group date">
<span class="input-group-addon">
<i class="fa fa-calendar"></i>
</span>
<input aria-required="true" id="startson" class="form-control block-keypress" type="text"
onclick="css()">
<small id="start_dateHelp" class="text-danger hide">
Start Date is Required
</small>
</div>
</div>
</div>
<div class="form-group" id="dateEndsOn">
<label class="col-sm-3 control-label">Ends On *</label>
<div class="col-sm-7">
<div class="input-group date">
<span class="input-group-addon">
<i class="fa fa-calendar"></i>
</span>
<input aria-required="true" id="endson" class="form-control block-keypress" type="text" onclick="css()">
<small id="end_dateHelp" class="text-danger hide">
End Date is Required
</small>
</div>
</div>
</div>
...
....
在jquery中我正在按照保存按钮单击
进行以下验证 if((":input").val().trim() =="")
{
$(this).closest(".form-group").addClass( "has-error");
$("small").removeClass('hide');
return;
}
if(academicyearname == "")
{
$("#academicyearname").closest(".form-group").addClass( "has-error");
$("#year_nameHelp").removeClass('hide');
$("#academicyearname").focus();
}
else if(startson == "")
{
$("#startson").closest(".form-group").addClass( "has-error");
$("#start_dateHelp").removeClass('hide');
}
else if(endson == "")
{
$("#endson").closest(".form-group").addClass( "has-error");
$("#end_dateHelp").removeClass('hide');
}
....
部分
if((":input").val().trim() =="")
{
$(this).closest(".form-group").addClass( "has-error");
$("small").removeClass('hide');
return;
}
没有相应的工作。我的意思是它应该能够动态检测哪些输入为空，然后将错误类添加到相应的输入，其中值为＆＃34;＆＃34;。
答案 0 :(得分：0)
您可以使用jquery validator js的空白元素插件，您可以按如下方式使用它：
$( "input:blank" ).css( "background-color", "#bbbbff" );
看看下面的内容：
https://jqueryvalidation.org/blank-selector/
它也可以在id和class级别应用。
答案 1 :(得分：0)
尝试使用
var result = $("input:text").val().trim();
if(result == ""){
//do something
}
答案 2 :(得分：0)
var vendorError = false;
$(".vendorForm input").each(function () {
if ($(this).val() == '') {
jAlert('Required', 'empty');
vendorError = true;
var div = document.getElementById($(this).attr('id'));
// show meg logic
if (div.style.display !== "block") {
div.style.display = "block";
}
return false;
}
})
if (vendorError) {
return false;
}
HTML文件
<div id="vendorForm" class="form-group">
<label class="col-sm-3 control-label">Academic Year *</label>
<div class="col-sm-7"><input type="text" id="academicyearname" maxlength="4" class="form-control only-numbers">
<small id="year_nameHelp" class="text-danger hide">
Academic Year is Required
</small>
</div>
</div>
<div class="form-group" id="dateStartsOn">
<label class="col-sm-3 control-label">Starts On *</label>
<div class="col-sm-7">
<div class="input-group date">
<span class="input-group-addon">
<i class="fa fa-calendar"></i>
</span>
<input id="startson" value="" class="form-control block-keypress" type="text"
onclick="css()">
<small id="start_dateHelp" class="text-danger hide">
Start Date is Required
</small>
</div>
</div>
</div>
<div class="form-group" id="dateEndsOn">
<label class="col-sm-3 control-label">Ends On *</label>
<div class="col-sm-7">
<div class="input-group date">
<span class="input-group-addon">
<i class="fa fa-calendar"></i>
</span>
<input id="endson" value="" class="form-control block-keypress" type="text" onclick="css()">
<small id="end_dateHelp" class="text-danger hide">
End Date is Required
</small>
</div>
</div>
</div>
...
....
答案 3 :(得分：0)
我理解并且我也设计了一些相同的模块。您可以使用模态并在js中提供该ID，然后单击按钮可以在js文件中运行该函数。请参阅我的html页面：
<div class="modal-body">
<div class="form-group">
<form id = "updateForm" onsubmit="return false" enctype="multipart/form-data">
<div class="left">
<div class="well img_height">
<img id="blah" src="admin_resources/images/user-icon.png"/>
</div>
<div>
<input type="file" name="myfile" onchange="readURL(this);" id="myfile"/>
</div>
</div>
<label for="emp_id">Employee Id:</label>
<input type="text" class="form-control" id="emp_id" name="employeeId" >
<p id="valid_msg_employee_id" class="error_message"></p>
<label for="fname">First Name:</label>
<input type="text" class="form-control" id="firstName" name="firstName" >
<p id="valid_msg_fname" class="error_message"></p>
<label for="lname">Last Name:</label>
<input type="text"class="form-control" id="lastName" name="lastName">
<p id="valid_msg_lname" class="error_message"></p>
<label for="designation">Designation:</label> <br/>
<select name="designation" id="dropdown" class="form-control">
<option value="Select">Select Designation</option>
<option value="manager">Manager</option>
<option value="HR">HR</option>
<option value="Tech Lead">Tech Lead</option>
<option value="QA Lead">QA Lead</option>
<option value="Developer">Developer</option>
<option value="QA-Automation">QA-Automation</option>
<option value="QA-Manual">QA-Manual</option>
<option value="Software Trainee">Software Trainee</option>
<option value="Sr. Software Quality Engineer">Sr. Software Quality Engineer</option>
<option value="SQE">SQE</option>
<option value="Software Quality Engineer">Software Quality Engineer</option>
<option value="Associate Software Engineer">Associate Software Engineer</option>
<option value="QA Manager">QA Manager</option>
</select>
<p id="valid_msg_designation" class="error_message"></p>
<label for="Doj">Joining Date:</label>
<input type="text" class="form-control" id="doj" name="yearOfJoining" >
<p id="valid_msg_year" class="error_message"></p>
<label for="status">Status:</label> <br/>
<select name="status" id="status" class="form-control">
<option value="active">Active</option>
<option value="inactive">inactive</option>
</select>
<p id="valid_msg_designation" class="error_message"></p>
<p id="valid_msg_year" class="error_message"></p>
<label for="email_id">Email-id:</label>
<input type="email" class="form-control" id="email" name="email">
<p id="valid_msg_email" class="error_message"></p>
<label for="quali">Contact:</label>
<input type="text" class="form-control" id="contact" name="mobileNo">
<p id="valid_msg_contact" class="error_message"></p>
<button type="submit" class="btn btn-default" onclick="updateEmployeeDetail();" data-dismiss="modal">Update</button>
<button type="button" class="btn btn-default" onclick = "deleteEmployee();" data-dismiss="modal">Delete</button>
</form>
</div>
</div>
现在你可以添加一个类“erro_message”，它将在模态上调用： js文件是这样的：
function employeeDetail() {
$("#submit_emp").click(function(event) {
var formValid = employeeDetail.formValidation();
if (formValid) {
var formvalue = new FormData($('#addForm')[0]);
$.ajax({
url: "intranet/addEmployee",
type: "POST",
data: formvalue,
contentType: false,
processData: false,
success: function(response) {
$('#your-modal').modal('toggle');
$("#header_success").empty();
$("#header_success").append("Response");
$("#message_success").empty();
$("#message_success").append(response.message);
$('#addForm').trigger("reset");
},
error: function(e) {
$('#your-modal').modal('toggle');
$("#message_success").empty();
$("#message_success").append(e.message);
}
});
} else {
return false;
}
});
您可以在此输入类型上添加许多验证，并且可以在该特定的fied上附加消息ypuwant： 希望这对你有帮助。
答案 4 :(得分：0)
这是超级简单的，并不通过检查例如数值等来进行“验证”，但是你想要/要求选择器为空文本输入，所以这给了它。
// put on some event, used change here:
$('input[type=text]').on('change', function() {
// just clear all
$(".form-group").removeClass("has-error");
$("small").addClass('hide');
// filter those empty ones
$('input[type=text]').filter(function() {
return $(this).val().trim() == "";
}).each(function() {
$(this).closest(".form-group").addClass("has-error");
$(this).parent().find("small").removeClass('hide');
});
});<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>
<div class="form-group">
<label class="col-sm-3 control-label">Academic Year *</label>
<div class="col-sm-7"><input type="text" id="academicyearname" maxlength="4" class="form-control only-numbers">
<small id="year_nameHelp" class="text-danger hide">Academic Year is Required</small>
</div>
</div>
<div class="form-group" id="dateStartsOn">
<label class="col-sm-3 control-label">Starts On *</label>
<div class="col-sm-7">
<div class="input-group date">
<span class="input-group-addon"><i class="fa fa-calendar"></i> </span>
<input aria-required="true" id="startson" class="form-control block-keypress" type="text" >
<small id="start_dateHelp" class="text-danger hide">Start Date is Required</small>
</div>
</div>
</div>
<div class="form-group" id="dateEndsOn">
<label class="col-sm-3 control-label">Ends On *</label>
<div class="col-sm-7">
<div class="input-group date">
<span class="input-group-addon"> <i class="fa fa-calendar"></i> </span>
<input aria-required="true" id="endson" class="form-control block-keypress" type="text" >
<small id="end_dateHelp" class="text-danger hide">End Date is Required</small>
</div>
</div>
</div>