我是 jquery 新手，我想在 asp.net mvc 中验证我的表单。目前，验证适用于每个字段，但我想保持提交按钮禁用，直到 某些特定字段已以正确的方式插入。当我完成插入所有字段时，创建按钮仍然被禁用，我不知道为什么
$(this).hasClass('has-success')
始终返回 false
这是我正在使用的代码:
@model StudentsManagment.Models.student
@{
ViewBag.Title = "Create";
Layout = "~/Views/Shared/_Layout.cshtml";
}
<h2>Create</h2>
@using (Html.BeginForm())
{
@Html.AntiForgeryToken()
<div class="form-horizontal" id="studentForm">
<h4>Student</h4>
<hr />
@Html.ValidationSummary(true)
<div class="form-group">
@Html.LabelFor(model => model.First_name, htmlAttributes: new { @class = "control-label col-md-2" })
<div class="col-md-10">
@Html.TextBoxFor(model => model.First_name, new { @class = "form-control", name = "First_name" })
@Html.ValidationMessageFor(model => model.First_name, null, new { @class = "text-danger" })
</div>
</div>
<div class="form-group">
@Html.LabelFor(model => model.Last_name, htmlAttributes: new { @class = "control-label col-md-2" })
<div class="col-md-10">
@Html.TextBoxFor(model => model.Last_name, new { @class = "form-control", name = "Last_name" })
@Html.ValidationMessageFor(model => model.Last_name, null, new { @class = "text-danger" })
</div>
</div>
<div class="form-group">
@Html.LabelFor(model => model.Date_of_birth, htmlAttributes: new { @class = "control-label col-md-2" })
<div class="col-md-10">
@Html.TextBoxFor(model => model.Date_of_birth, null, new { @placeholder = "Date: MM-DD-yyyy", @class = "form-control", name = "Date_of_birth" })
@Html.ValidationMessageFor(model => model.Date_of_birth, null, new { @class = "text-danger" })
</div>
</div>
<div class="form-group">
@Html.LabelFor(model => model.Student_id, htmlAttributes: new { @class = "control-label col-md-2" })
<div class="col-md-10">
@Html.TextBoxFor(model => model.Student_id, new { @class = "form-control", name = "Student_id" })
@Html.ValidationMessageFor(model => model.Student_id, null, new { @class = "text-danger" })
</div>
</div>
<div class="form-group">
@Html.LabelFor(model => model.City, htmlAttributes: new { @class = "control-label col-md-2" })
<div class="col-md-10">
@Html.TextBoxFor(model => model.City, new { @class = "form-control", id = "citySearch", name = "City" })
@Html.ValidationMessageFor(model => model.City, null, new { @class = "text-danger" })
</div>
</div>
<div class="form-group">
@Html.LabelFor(model => model.Description, htmlAttributes: new { @class = "control-label col-md-2" })
<div class="col-md-10">
@Html.TextAreaFor(model => model.Description, 8, 1, new { @class = "form-control", name = "Description" })
@Html.ValidationMessageFor(model => model.Description, null, new { @class = "text-danger" })
</div>
</div>
<div class="form-group">
<div class="col-md-9 col-md-offset-3">
<div id="messages"></div>
</div>
</div>
<div class="form-group">
<div class="col-md-offset-2 col-md-10">
<input type="submit" value="Create" class="btn btn-lg btn-success submit-button" disabled="disabled" id="create" />
</div>
</div>
</div>
}
<div>
@Html.ActionLink("Back to List", "Index")
</div>
<script type="text/javascript">
$(document).ready(function () {
$('form:first *:input[type!=hidden]:first').focus();
$('#studentForm').bootstrapValidator({
container: '#messages',
feedbackIcons: {
valid: 'glyphicon glyphicon-ok',
invalid: 'glyphicon glyphicon-remove',
validating: 'glyphicon glyphicon-refresh'
},
fields: {
First_name: {
validators: {
notEmpty: {
message: 'The first name is required and cannot be empty'
},
stringLength: {
max: 20,
min:2,
message: 'The full name must be between 2-20 characters'
},
regexp: {
regexp: /^[a-zA-Z\s]+$/i,
message: 'The full name can consist of alphabetical english characters and spaces only'
}
}
},
Last_name: {
validators: {
notEmpty: {
message: 'The last name is required and cannot be empty'
},
stringLength: {
max: 20,
min: 2,
message: 'The full name must be between 2-20 characters'
},
regexp: {
regexp: /^[a-zA-Z\s]+$/i,
message: 'The full name can consist of alphabetical english characters and spaces only'
}
}
},
Date_of_birth: {
validators: {
notEmpty: {
message: 'The birth date is required and cannot be empty'
},
date: {
message: 'The date is not valid',
format: 'MM-DD-YYYY'
}
}
},
Student_id: {
validators:{
notEmpty: {
message: 'The Student id is required and cannot be empty'
},
regexp: {
regexp: /^[0-9\b]+$/,
message: 'The student id should conatin only digits'
},
stringLength: {
max: 9,
min: 9,
message: 'The student id must be 9 digits'
}
}
},
City:{
validators: {
notEmpty:{
message: 'City cannot be empty'
}
}
},
Description: {
validators: {
stringLength: {
max: 1000,
message: 'The description field should be less than 1000 characters '
},
required: false
}
}
}
});
});
$('#studentForm').on('status.field.bv', function (e, data) {
formIsValid = true;
console.log("begin:"+formIsValid.toString());
$('.form-group',$(this)).each(function () {
formIsValid = formIsValid && $(this).hasClass('has-success');
console.log("end:" + $(this).parent().hasClass('has-success').toString());
});
if (formIsValid) {
data.bv.disableSubmitButtons(false);
} else {
data.bv.disableSubmitButtons(true);
}
});
</script>
<script type="text/javascript">
$(document).ready(function () {
$("#citySearch").autocomplete({
source: function(request,response) {
$.ajax({
url: "/Home/AutoCompleteCity",
type: "POST",
dataType: "json",
data: { term: request.term },
success: function (data) {
if (data.length == 0) {
alert('No matches!');
$("#citySearch").autocomplete("close");
}
else {
response($.map(data, function (item) {
return {
label: item.CityName,
value: item.CityName
}
}));
}
}
})
}
});
})
</script>
最佳答案
这里我检查了所有字段...您可以在每个循环中指定特定字段。
$('#studentForm').on('status.field.bv', function(e, data) {
formIsValid = true;
$('.form-group',$(this)).each( function() {
formIsValid = formIsValid && $(this).hasClass('has-success');
});
if(formIsValid) {
data.bv.disableSubmitButtons(false);
} else {
data.bv.disableSubmitButtons(true);
}
});
关于javascript - $(this).hasClass ('has-success' ) 始终返回 false，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/35573775/