Question

我使用jQuery mobile主题和jQuery validate plugin进行验证。插件的行为是不可预期的。首先看我的HTML代码

<ul data-role="listview" data-inset="true" id="updatepage">
    <form method="POST" action="/update-account-info" accept-charset="UTF-8" data-ajax="false" id="updateUser">
        <div data-role="content">
            <li data-role="fieldcontain">
                <input required="required" class="slide1el" id="first_name" data-clear-btn="true" placeholder="First Name" name="first_name" type="text" value="Awais">            
                <div class="error-wrapper"></div>
            </li>

            <li data-role="fieldcontain">
                <input class="slide1el" id="last_name" data-clear-btn="true" placeholder="Last Name" name="last_name" type="text" value="Qarni">            
                <div class="error-wrapper"></div>
            </li>

            <li data-role="fieldcontain">
                <input class="slide1el" id="website" data-clear-btn="true" placeholder="Website URL" name="website" type="text">            
                <div class="error-wrapper"></div>
            </li>
            <div>
               <div class="ui-block-a"><button type="button" data-theme="a">Cancel</button></div>
               <div class="ui-block-b"><button type="submit" data-theme="a">Submit</button></div>
            </div>
        </div>
    </form>
</ul>

这是我的javascrip代码

 jQuery("#updateUser").validate({
    errorElement: "label",
    focusCleanup: true,
    rules: {

        first_name: {
            required : true
        },
        last_name: {
            required : true
        },
        website: {
            required : true,
            url : true
        }
    },
    messages : {
        first_name : {
            required : 'First Name is required',
        },
        last_name : {
            required : 'Last Name is required',
        },
        website : {
            required : 'Website is required',
            url : 'Please enter correct URL'
        }
    },
    onkeyup: false,
    errorPlacement: function (error, element) {
        element.parents('li').find('div.error-wrapper').html(error)
        element.parents('li').find('div.error-wrapper').find('label').removeClass('error_text');
    },
    // set the errorClass as a random string to prevent label disappearing when valid
    errorClass : "error_text",
    validClass : "ui-focus",
    // use highlight and unhighlight
    highlight: function (element, errorClass, validClass) {

        jQuery(element).parent().addClass(errorClass).removeClass(validClass);

    },
    unhighlight: function (element, errorClass, validClass) {
        jQuery(element).parent().removeClass(errorClass)
        jQuery(element).parent().next().find('label').remove();
        jQuery(element).parent().parent().next().find('label').remove();

    }
});

当用户提交表单时，我目前正在做什么，我尝试验证表单。如果输入字段为空，请在该字段中添加红色边框，并在div class=error-wrapper中显示自定义错误消息。

但是当我提交错误按钮时，它只会在DOM中找到的第一个空字段上创建焦点。当我点击DOM中的任何位置时，它会显示错误类并突出显示文本框。我在firebug中看到它，当我单击提交按钮时，它会向空元素添加一个ui-focus类。当我单击DOM中的任何位置时，将自动删除ui-focus类并添加我的错误类。

我甚至尝试删除ui-focus类，但它不起作用。请指导我，我做错了什么？

Answer 1

您的代码中不清楚的是高亮/非高亮功能的重点是什么？

我发现，如果我删除它们并设置focusInvalid:false，一切都开始运作良好。

因此，您的验证呼叫最终看起来像这样（我为了简洁起见了规则和消息）：

jQuery("#updateUser").validate({
    focusCleanup: true,
    focusInvalid: false,
    /* rules and messages here */       
    onkeyup: false,
    errorPlacement: function (error, element) {
        element.parents('li').find('div.error-wrapper').html(error)
        element.parents('li').find('div.error-wrapper').find('label').removeClass('error_text');
    },
    errorClass : "error_text",
    validClass : "ui-focus"
});

它的工作原理如我所料，请看这里：http://jsfiddle.net/ryleyb/DC5Sz/1/

jQuery validate插件意外工作

1 个答案: