如果输入字段无效，则清除该输入字段

Question

我正在使用验证插件。我试图弄清楚如何清除文本字段（如果该字段无效）。

我的 JavaScript 代码如下，

$(document).ready(function() {
$("#enrollForm").validate({
    rules: {
        email: {
            required: true,
            email: true
        },
        vemail: {
            required: true,
            email: true,
            equalTo: "#email"
        },
        offer_code: {
            required: false,
            remote: "check_code.php"
        }
    }
});});

如果该字段无效，我会尝试清除名为 Offer_code 的字段。是否可以在验证函数中执行此操作？

亚历克斯

Answer 1

看看这个：

http://docs.jquery.com/Plugins/Validation/valid

例子：

$(document).ready(function() {
$("#enrollForm").validate({
    rules: {
        email: {
            required: true,
            email: true
        },
        vemail: {
            required: true,
            email: true,
            equalTo: "#email"
        },
        offer_code: {
            required: false,
            remote: "check_code.php"
        }
    }
});});

$("#enrollForm").blur(function() {
  if($("#enrollForm").valid()) {
    //success code?
  } else {
    $("#enrollForm").val('')
  }
});

Answer 2

我使用 jquery 来验证一些表单。例如，在我的网站上，有一个部分用户必须输入然后重新输入密码。如果他们的第二个密码的值等于他们的第一个密码，我使用 jquery 向下滑动一个 div，上面写着“您的密码匹配！”

试试这个：

$(document).ready(function(){
        $("#error").hide();
        $("#invite").hide();
        $("#confirm").hide();
        $("#invite_short").hide();
        $("#short").hide();

    $('.button').click(function checkPass(){
        var pass = $("#pass").val();
        var confirm = $("#con-pass").val();

        if(pass != confirm)
        {
            $("#error").slideDown();
            return false;
        } 

        });

    $('#con-pass').keyup(function checkPass(){
        var pass = $("#pass").val();
        var confirm = $("#con-pass").val();

        if(pass == confirm)
        {
            $("#error").slideUp();
            $("#confirm").slideDown();
            return false;
        } 

        if(pass != confirm)
        {
            $("#confirm").slideUp();
            return false;
        } 

        });

    $('#pass').keyup(function checkChar(){
        var pass = $("#pass").val().length;

        if(pass < 4)
        {
            $("#short").slideDown();
            return false;
        } 

        if(pass == 4
        || pass > 4)
        {
            $("#short").slideUp();
        } 

        });

        $('#invite_number').keyup(function checkCode(){
        var code = $("#invite_number").val();

        if(code.length == 8)
        {
            $("#invite_short").slideUp();
            $("#invite").slideDown();
            return false;
        }  

        if(code.length < 8)
        {
            $("#invite").slideUp();
            return false;
        }  


        });

        $('.button').click(function checkCode(){
        var code = $("#invite_number").val();

        if(code.length < 8)
        {
            $("#invite_short").slideDown();
            return false;
        }  

        });
    });

那里有很多代码。但是，它还根据长度要求验证了表单。如果密码少于 4 个字符，系统会在用户输入密码时发出通知。

你明白了......希望这有帮助

Answer 3

假设插件为 input 分配了一个 label ，并且具有 error 类，那么您可以这样做：

$('label.error').prev('input').val('');

更准确一点，因为验证插件还为错误标签分配了一个 for 属性：

$(document).ready(
  function(){

     // call to the plug-in here, input-clearing afterwards
     // (though I'm not sure it matters, since it's dependant
     // on CSS selectors to work, which aren't dependant on
     // the plug-in itself).

     $('label.error').each(
       function(){
         var errorInputID = $(this).attr('for');
         $('#'+errorInputID).val('');
       });
  });

我假设“验证插件”指的是这个，位于：http://bassistance.de/jquery-plugins/jquery-plugin-validation/，如果我错了那么这个，显然，可能行不通。