jQuery验证需要两次点击

时间:2013-10-09 17:12:54

标签: jquery jquery-validate

我在对文本字段使用自定义方法的表单上进行了一些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>

0 个答案:

没有答案