Question

我整个下午一直在努力尝试配置jquery验证，并且想知道我是否能得到一些帮助。

我正在使用yaml.css作为我的css框架。 yaml对表单的工作方式是原始表单看起来像这样......

<form id="loginForm" name="loginForm" class="ym-form" action="/ReportingManager/j_spring_security_check" method="post">                               
   <div class="ym-fbox">
      <label for="j_username">Username<sup class="ym-required">*</sup></label>
      <input id="j_username" name="j_username" placeholder="enter a value" class="{required:true}" type="text" value="" maxlength="30"/>
   </div>       
   <input id="loginBtn" type="submit" class="ym-button ym-primary" value="Log in" title="Log in" />                     
</form>

提交表单后出错，我需要做两件事......

1 - 在输入字段下方添加以下内容（在ym-fbox div中）...

<p class="ym-message"> jquery error message here </p>

2 - 更改包含输入表单元素的父div，以添加名为ym-error的类。

...从

<div class="ym-fbox">

到...

<div class="ym-fbox ym-error">

我犹豫是否发布了我尝试过的内容，因为它不起作用，只是为了表明我已经尝试过这是我迄今为止所尝试过的......

$().ready(function() {
    $("form").validate({
        ...
    errorClass:'ym-error',
    errorElement: 'p',
    errorPlacement: function(error, element) {
        error.insertAfter(element);
        },
        highlight: function (element, errorClass, validClass) { 
            $(element).parents("div").addClass(errorClass); 
        },      
        unhighlight: function (element, errorClass, validClass) { 
            $(element).parents("div").removeClass(errorClass); 
        },

这不好。任何人都可以大致给我一些表格验证方法的帮助吗？

感谢

Answer 1

为了别人的利益......我在阿伦的帮助下解决了这个问题....

$().ready(function() {
    $("form").validate({
        onblur: false,
        onchange: false,
        onkeyup: false,
        onsubmit: true,
        submitHandler: function(form) {
            $(form).removeClass('dirty');
            $('button').attr('disabled','disabled');
            $('button').addClass('disabled');
            form.submit();
        },
        errorClass:'ym-message',
        errorElement: 'p',
        errorPlacement: function(error, element) {
            error.insertAfter(element);
        },
        highlight: function (element, errorClass, validClass) { 
            $(element).closest("div").addClass("ym-error");
        },      
        unhighlight: function (element, errorClass, validClass) { 
            $(element).closest("div").removeClass("ym-error"); 
        },      
        ignore: ".ignore"
    });
});

JQuery自定义验证（errorClass，errorElement和errorPlacement）

1 个答案: