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

Demo 这就是你需要这个插件支持那种技巧的东西，并为此工作只是做

<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>

然后我使用showErrors：jquery.validate API的函数（错误）来显示隐藏的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
});