带有样式的成功消息,jquery验证

plupiseo  于 2023-03-17  发布在  jQuery
关注(0)|答案(2)|浏览(101)

我使用的是jquery.validation,下面是代码,我通过附加class并给class一些css来显示一个样式化的错误消息。

$("#sign-up").validate({
    rules: {
        FullName: {
            required: true
        },
        Username: {
            required: true
        },
        Email: {
            required: true,
            email: true
        }
    },
    messages: {
        FullName: "Please enter your full name",
        Username: "Please enter handle name",
        Email: {
            required: "Please enter an email address",
            email: "Please enter a valid email address"
        }
    },
    errorElement: "span",
    wrapper: "div",
    errorPlacement: function (error, element) {
        error.insertBefore(element);
        error.addClass("error-validation");
    }
});

但是我也想显示一个漂亮的成功消息,比如错误消息,样式。一旦验证通过,消息应该显示。
我该怎么做呢?

1sbrub3j

1sbrub3j1#

documentation

success: function(label) {
  $("#success").show();
},

如果不清除该页面,则需要在验证之前隐藏成功

7bsow1i6

7bsow1i62#

方法1:(将成功消息应用于所有字段)

$("#myform").validate({
      success: function(label) {
        label.addClass("valid").text("Ok!")
      }
 });

方法二:(将成功消息应用于特定字段)

$("#myform").validate({
       errorClass: 'input_msg',
       validClass: "valid",
       unhighlight: function(element, errorClass, validClass) {
           if ($(element).attr('name') == 'email') { /* Apply to email field only */
               $(element).parent().find('.input_msg').addClass(validClass).html('Ok!');
           }
       },
       success: function(label) {},
   });

为了更好的理解,看看下面的官方链接
https://jqueryvalidation.org/validate/#success

相关问题