我有一个简单的表单创建使用Ajax.BeginForm:
<% using (Ajax.BeginForm("Update", "Description", new { id = Model.Id },
new AjaxOptions
{
UpdateTargetId = "DescriptionDiv",
HttpMethod = "post"
},new {id ='AjaxForm' })) {%>
Description:
<%= Html.TextBox("Description", Model.Description) %><br />
<input type="submit" value="save" />
<% }%>
控制器已接线并返回更新的部分视图DescriptionDiv.这一切都很巧妙.
现在我希望能够在没有提交按钮的情况下提交此表单(通过链接或图像上的clik或其他任何内容).不幸的是,这个小jQuery片段不起作用:
$('form#AjaxForm').submit();
它确实提交了表单,但确实(我想并不奇怪)是一个常规的回发而不是Ajax.
为简单起见,上面的jQuery是这样连接起来的:
<a href="#" onclick="$('form#AjaxForm').submit(); return false;">submit</a>
表单的onsubmit使用的是Sys.Mvc.AsyncForm.handleSubmit(),但jQuery提交似乎绕过了这个.
PS.我正在寻找这种特殊方法的解决方案.我知道如何使用普通表单实现相同的功能并使用AJAX + jQuery发布它.我对这个特定的解决方案很感兴趣.
我正在使用jQuery Validate插件,并且永远找不到显示复选框错误的好方法.如果没有选中,我想以红色突出显示所有复选框标签,并决定通过向包含复选框和复选框标签的div添加错误类来执行此操作.但是,它似乎没有添加类.我没有正确选择div吗？
HTML:
<div class="left-aligned indent">
<label id="id_label" for="id" class="label">Items:</label>
<div class="select-group">
<input type="checkbox" name="items" value="1" id="item_1" />
<label class="checkbox">Item #1</label><br />
<input type="checkbox" name="items" value="1" id="item_2" />
<label class="checkbox">Item #2</label><br />
<input type="checkbox" name="items" value="1" id="item_3" />
<label class="checkbox">Item #3</label><br />
</div>
</div>
使用Javascript:
$().ready(function() {
$('#addForm').validate({
rules: {
"items": {
required: true,
minlength: 1
}
},
errorPlacement: function(error, element) {
if (element.is(':checkbox')) {
$(this).prev("div").addClass('checkbox-error');
}
else {
return true;
}
}
});
});
CSS:
.error {
background-color: #FF898D; …我使用Twitter的Bootstrap作为我正在进行的项目的框架.我试图使用jQuery Validate插件验证一个简单的联系表单,但它引起了一些令人头疼的问题.
我想在每个表单的输入的父div中添加一个Error或Valid类.这是我的表单代码:
<form id="msg-form" class="">
<fieldset>
<div class="input-prepend control-group pull-left">
<span class="add-on">@</span>
<input class="span3 required email" id="inputEmail" name="msg-email" type="text" placeholder="example@example.com">
</div>
<div class="input-prepend control-group pull-left">
<span class="add-on"><i class="icon-user"></i></span>
<input class="span3 required" id="inputName" name="msg-name" type="text" placeholder="Joe Bloggs">
</div>
<div class="input-prepend control-group">
<span class="add-on" style="height: 53px;"><i class="icon-pencil"></i></span>
<textarea class="span3 required" id="textarea" name="msg-comments" rows="2" style="height: 53px" placeholder="Just say hi, or tell us how we can help"></textarea>
</div>
<button type="submit" class="btn pull-right">Submit<i class="icon-chevron-right"></i></button>
</fieldset>
</form>
正如你所看到的,我的div.control-group …
我需要为表单验证失败的任何情况添加句柄.
我已经读过这个,这解释了我必须添加一个处理程序,如下所示:
$('form').bind('invalid-form.validate', function () {
console.log('form is invalid!');
});
但是,当我尝试提交表单时,此事件才会触发.
我需要处理一个事件,该事件在表单经过后验证时被触发(即元素失去焦点等).
我想要实现的是,我有一个大型(~50个字段),并且它在Bootstrap选项卡中分割.
我想,当有任何新的验证失败或成功时,在包含无效/有效元素的选项卡的选项卡标题中设置或清除错误类.PS我的问题不在于如何在选项卡中设置这些类.我只想知道要处理哪些事件,以便在整个表单中的每个验证状态更改时得到通知.
我正在使用bootstrap CSS表单样式,当文本框获得验证错误消息时,我需要将类"错误"放在容纳上.我怎样才能做到这一点？
问题是,在提交表单之前,所有验证都在ajax上触发,除了我的自定义验证器,它只在帖子上触发.所以需要确保两种情况都发生.
我的 ASP.NET MVC4 应用程序具有在模型中定义并在控制器方法中实现的远程验证规则。我的表单是动态添加到页面的。因此，我使用以下代码来触发验证。
$(tabId).on("submit", formId, function (event) {
event.preventDefault();
var form = $(this);
form.removeData("validator");
$.validator.unobtrusive.parse(form);
if (form.valid())
{
// form submission
// THIS part executes even though the remote validation returns false
}
return false;
});
它开始远程验证并且不等待完成然后提交表单。如果任何其他字段无效（例如，名称是必填字段），则会停止提交。但是，它不会等待远程验证。
我在 SO 上找到了一些解决方法，例如link1和link2。但是，只有在我的页面中定义了 jQuery 验证规则时，这些才有效。但是，我使用的是 MVC4 模型验证规则。因此，我没有兴趣再次在我的视图页面中重新定义规则。
有什么解决办法吗？
使用jQuery Validate，是否有一种方法可以在不重新验证表单的情况下确定表单是否有效。
根据这个关于如何在使用 jQuery Unobtrusive Validation 时添加“submitHandler”函数的问题？，我正在侦听该invalid-form.validate事件，以便在表单经过验证并出现错误时向用户显示自定义错误。
根据有关如何防止双击提交的问题，一旦提交表单，我将禁用提交按钮，但前提是表单有效，因此用户可以采取纠正措施并在表单清理后重新提交。
现在的问题是invalid-form.validate火了两次。
由于invalid-form.validate事件在我的表单提交处理程序之前触发，我已经知道错误的数量。该.valid()方法是否会在某处保留错误数量，以便我可以针对该值进行检查，而不是重新验证表单。
这是堆栈片段中的一个示例。在填写必填字段之前点击提交，您将看到两条错误消息。
$("form").validate();
// show message on invalid submission
$("form").on("invalid-form.validate", function (event, validator) {
var errors = validator.numberOfInvalids();
if (errors) {
alert('There is a problem with ' + errors + ' fields.');
}
});
// prevent double click form submission
$('form').submit(function () {
if ($(this).valid()) {
$(':submit', this).attr('disabled', 'disabled');
}
});<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.js"></script> …我想连接所有表单,以便在Jquery Validation未发现错误之后,在表单提交或提交之前显示加载程序.
如何使用MVC 4不显眼的验证来实现这一目标？
我按照本文,如何在使用jQuery Unobtrusive Validation时添加'submitHandler'函数尝试了以下内容？:
$("form").data("validator").settings.submitHandler = function (form) { alert('submit'); form.submit(); };
我将它放在OnLoad部分,但这不会触发.我认为以上将适用于所有形式？
谢谢!
我正在尝试做的事情：
我需要遍历所有内部具有无效值的 HTML 对象。这是必要的，因为我有选项卡式页面，并且我需要打开发生错误的某些特定选项卡。为了做到这一点，我需要获取这些对象的父对象。
这就是我想要解决的问题：
$form.validate().settings.invalidHandler = function (form, validator) {
var errors = validator.numberOfInvalids();
if (errors) {
validator.errorList[0].element.focus();
for (var invObj in validator.errorList) {
//do something for each invalid object
}
}
};
其中 $form 是<form>具有一些内部要验证的输入的对象。
$form.validate()我认为在调用or后，每个无效对象都会调用它$form.valid()。事实上，它根本没有被调用。您知道一些更好的方法来实现它吗？