我在对文本字段使用自定义方法的表单上进行了一些jQuery验证(uniqueURL
,如下所示)。只要用户在文本字段中输入一个值,然后在单击“提交”按钮之前单击该字段,所有这些都可以正常工作(验证成功和失败)。相反,如果他将文本输入到字段中,然后立即单击“提交”按钮,则验证功能将再次运行,并且“提交”按钮将进入其“点击”状态。外观(通过twitter bootstrap),但表单未提交。但是,第二次单击“提交成功”会提交表单。
这里和其他地方的帖子并不缺少双击问题,但我还没有能够根据这种情况调整他们的任何建议。有什么建议吗?谢谢!
$.validator.addMethod('uniqueURL',
function (value) {
var validator = this;
var theData = { url: $('#edit-link').attr('value'), parent_nid: 123 };
var theResult;
$.ajax({
type: 'POST',
url: 'http://www.example.com/doc-url-check',
data: theData,
success: function(response) {
var the_result = response[0];
switch (the_result) {
case 0: // empty
case -1: // not a url
case -2: // already in use
$.validator.messages.uniqueURL = response[1];
theResult = false;
break;
default:
theResult = true;
break;
};
},
dataType: 'json',
async: false
});
return theResult;
},
'We\'re having trouble checking on this link: Please try again later.');
$('form#edit_document').validate({
rules: {
'files[field_local_file_private]': { required: true, extension: 'doc|xls|txt' },
link: { required: false, uniqueURL: true }
},
messages: {
title: 'What\'s the title of this document?',
doc_type: 'Are you storing a document or adding a link to a webpage?',
'files[field_local_file_private]': 'Please select one of the following types of files: doc, xls, or txt',
},
errorPlacement: function(error, element) {
switch (element.attr('name')) {
case 'title':
error.insertAfter('.form-item-title > label');
break;
case 'doc_type':
error.insertAfter('.control-group.form-item-doc-type > label');
break;
case 'files[field_local_file_private]':
error.insertAfter('#edit-field-local-file-private');
break;
case 'link':
error.insertAfter('#edit-link');
break;
}
},
invalidHandler: function (form, validator) {
$('form#edit_document a.btn-primary').button('reset'); // reset the data-loading-text bit if validation failed
$('#modal_edit_document').css('cursor', 'auto');
},
});
html(手工缩进;这里可能有一个(更多?)额外的结束div,但它正确呈现);隐藏的变量来自Drupal的形式过程:
<form id="edit_document" novalidate="novalidate" enctype="multipart/form-data" method="post" accept-charset="UTF-8" action="/handle-add-document" style="display: block;">
<div class="modal-header">
<button aria-hidden="true" data-dismiss="modal" class="close" type="button">×</button>
<h3>Add a document</h3>
</div>
<div class="modal-body">
<div class="vr_overlay_form">
<div class="control-group form-type-textfield form-item-title form-item">
<label class="control-label" for="edit-title">Title </label>
<div class="controls">
<input type="text" maxlength="128" size="60" value="" name="title" id="edit-title" class="required form-text valid" autocomplete="off">
</div>
</div>
<div id="vr_document_doc_type_widget span5">
<div id="edit-doc-type" class="control-group form-type-radios form-item-doc-type">
<label class="control-label">What kind of document is this?</label>
<div class="controls">
<div id="doc-type-stored" class="row doc_type_element">
<div class="doc_type_label">
<div class="form-type-radio form-item-doc-type form-item">
<label for="edit-doc-type-stored" class="option radio">
<input type="radio" value="stored" name="doc_type" id="edit-doc-type-stored" class="required form-radio">Stored
</label>
</div>
</div>
<div class="doc_type_action">
<div id="edit-field-local-file-private-ajax-wrapper">
<div class="control-group form-type-managed-file form-item-field-local-file-private form-disabled form-item">
<div class="controls">
<div class="form-managed-file" id="edit-field-local-file-private">
<input type="file" class="form-file" size="22" name="files[field_local_file_private]" id="edit-field-local-file-private-upload" disabled="disabled" style="opacity: 1;">
<input type="hidden" value="0" name="field_local_file_private[fid]" disabled="disabled" style="opacity: 1;">
</div>
<p class="help-block" style="opacity: 1;">message</p>
</div>
</div>
</div>
</div>
</div>
<div id="doc-type-link" class="row doc_type_element">
<div class="doc_type_label">
<div class="form-type-radio form-item-doc-type form-item">
<label for="edit-doc-type-link" class="option radio">
<input type="radio" class="form-radio" value="link" name="doc_type" id="edit-doc-type-link">Link
</label>
</div>
</div>
<div class="doc_type_action">
<div class="control-group form-type-textfield form-item-link form-disabled form-item">
<div class="controls">
<input type="text" class="form-text required valid" maxlength="128" size="60" value="" name="link" id="edit-link" autocomplete="off">
<p class="help-block" style="opacity: 0.5;">message</p>
</div>
</div>
</div>
</div>
</div>
</div>
</div> /* extra, not needed? */
<div class="control-group form-type-textarea form-item-doc-notes form-item">
<label class="control-label" for="edit-doc-notes">Notes (optional) </label>
<div class="controls">
<div class="form-textarea-wrapper resizable"><textarea class="form-textarea" rows="5" cols="60" name="doc_notes" id="edit-doc-notes"></textarea></div>
</div>
</div>
<input type="hidden" value="269" name="parent_nid">
<input type="hidden" value="vr_project" name="parent_type">
<input type="hidden" value="0" name="doc_nid">
<input type="hidden" value="21" name="account_uid">
<input type="hidden" value="project-documents" name="return_to">
<input type="hidden" value="form-eSJkxfwxjj4FWITiqDz6re-mbjQFHDi5waC5XAvm05I" name="form_build_id">
<input type="hidden" value="pTO81aOnM29HpxAAOvF_EBF1ERTLzdjvmAprg7MDyOM" name="form_token">
<input type="hidden" value="vr_document_add_form" name="form_id">
</div></div>
<div class="modal-footer">
<a data_dismiss="modal" class="btn btn-primary saver" href="#" onclick="modal_submit('edit_document')">Save</a>
</div>
</form>