jquery - jQuery验证div

Question

我正在使用jquery.validate.js插件进行对话框验证。我的问题是，我只想提交第一个有问题的字段来获得一个类，并且字段错误在字段旁边的淡出 div 中显示为提示。（现在写插件在每个字段上添加标签）

我希望我足够清楚！

先感谢您！！！

（如果您需要更多，请询问）

编辑

它的代码

$("#wdw1003_useraddform").validate({
    rules : {
        wdw1003_username : {
            required : true
        },
        wdw1003_password : {
            required : true
        },
        wdw1003_fullname : {
            required : true
        },
        wdw1003_email : {
            required : true,
            email : true
        }
    },
    messages : {
        wdw1003_username : {
            required : "Field User Name is required"
        },
        wdw1003_password : {
            required : "Password is required"
        },
        wdw1003_fullname : {
            required : "Field Full Name is required"
        },
        wdw1003_email : {
            required : "Field E-mail is required",
            email : "Is not a valid e-mail"
        }
    }
});

在 ankur20us 评论后编辑

表格是用这行生成的

$form = new Form('useraddform', '#', $id."_");
$form -> setRequired('<img src="images/required.png" alt="Required" align="absmiddle" />', '<img src="images/required.png" alt="Required" align="absmiddle" />' . $trans -> translate('denotes required field'));
$form -> addElement('text', 'username', $trans -> translate('User Name'));
$form -> addElement('password', 'password', $trans -> translate('Password'));
$form -> addElement('text', 'fullname', $trans -> translate('Full Name'));
$form -> addElement('text', 'email', $trans -> translate('E-mail'));
$form -> addElement('select', 'perms', $trans -> translate('Permissions'), array('options' => $perms, 'value' => 'level1'));
$form -> addElement('select', 'status', $trans -> translate('Status'), array('options' => $status, 'size' => "1"));
$form -> addElement('textarea', 'comments', $trans -> translate('Comments'));
$form -> addElement('select', 'lang', $trans -> translate('Language'), array('options' => $langs, 'size' => "1"));
$form -> addElement('submit', 'submit', $trans -> translate('Create User'), array('style' => "clear:both; float:right; margin-right: 8%;"));

上面的 javascript 来自这些行

     $form -> addRule('username', 'required', $trans -> translate('Field User Name is required'));
$form -> addRule('password', 'required', $trans -> translate('Password is required'));
$form -> addRule('fullname', 'required', $trans -> translate('Field Full Name is required'));
$form -> addRule('email', 'required', $trans -> translate('Field E-mail is required'));
$form -> addRule('email', 'email', $trans -> translate('Is not a valid e-mail'));

所以我不能改变太多！！！

Answer 1

演示 这就是你所需要的，这个插件支持这种小费类型的东西，并且为了它工作只是做

<form id='validateMe'>
<input value=""  class="validate[required] text-input" type="text" name="reqplaceholder" id="reqplaceholder" />
<input type='submit' value='Validate'/>
</form>

Jquery 部分编码

jQuery("#validateMe").validationEngine();

Answer 2

这是我找到的解决方案。我像这样在我的页面中创建了一个隐藏的 div

<div id="validationMessageBox" class="ui-corner-all" style="display: none;">
    <div id="validationMessageBoxSymbol" class="ui-icon ui-icon-alert"></div>
    <div id="validationMessageBoxMessage"></div>
</div>

然后我使用 jquery.validate API 的 showErrors:function(errors) 来显示隐藏的 div 更新它的消息并将其定位在第一个缺失元素旁边。最后是淡出。

最终代码如下。

$("#wdw1003_useraddform").validate({
    rules : {
        wdw1003_username : {
            required : true
        },
        wdw1003_password : {
            required : true
        },
        wdw1003_fullname : {
            required : true
        },
        wdw1003_email : {
            required : true,
            email : true
        }
    },
    messages : {
        wdw1003_username : {
            required : "Field User Name is required"
        },
        wdw1003_password : {
            required : "Password is required"
        },
        wdw1003_fullname : {
            required : "Field Full Name is required"
        },
        wdw1003_email : {
            required : "Field E-mail is required",
            email : "Is not a valid e-mail"
        }
    },
    showErrors : function(errors) {
        var error = this.errorList[0];
        if(undefined != error) {
            var $element = $(error.element);
            var message = error.message;
            $element.addClass("ui-state-error");
            $("#validationMessageBox").addClass("ui-state-error").css({
                left : $element.offset().left + $element.width() + 15,
                top : ($element.offset().top)
            });
            $("#validationMessageBoxMessage").html(message);
            $("#validationMessageBox").show("fast");
            $element.removeClass("ui-state-error", 2000);
            $("#validationMessageBox").fadeOut(2000);
        }
    },
    onclick : false,
    onkeyup : false,
    onfocusout : false
});