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

Question

i am using validation plugin. i am trying to figure out how to clear a text field, if the field is invalid .

my javascript code is as follows

$(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"
        }
    }
});});

I am trying to clear out the field called offer_code if the field is invalid. is it possible to do this with in the validate function?

Alex

Answer 1

Check this out:

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

The example:

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

I have used jquery to validate a few forms. For instance, on my site, there is a part where a user has to enter and then re-enter their passwords. If the value of their second password is equal to their first password, I use jquery to slide down a div that says "Your passords match!"

Try this:

$(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;
        }  

        });
    });

There is a lot of code there. But, it also validates the form in terms of length requirements. If the password is less than 4 characters, it notifies them as they're entering their password.

You get the idea.... Hope this helps

Answer 3

Assuming that the plugin assigns a label for the input with a class of error , then you could do this:

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

To be a little more accurate, since the validation plugin also assigns a for attribute to the error labels:

$(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('');
       });
  });

I'm assuming, by 'validation plugin' that you mean this one, at: http://bassistance.de/jquery-plugins/jquery-plugin-validation/ , if I'm wrong then this, obviously, might not work.