Welcome to OStack Knowledge Sharing Community for programmer and developer-Open, Learning and Share
Welcome To Ask or Share your Answers For Others

Categories

0 votes
714 views
in Technique[技术] by (71.8m points)

jquery - validate form on load

I'm implementing the same validation in this link
http://alittlecode.com/files/jQuery-Validate-Demo/ So I display check marks next to elements on success, is there a way to display the checkmarks on form load when it has valid input by default, and display errors only on submit ? here is the code

 $("#frmsubmit").validate({
        rules: {
            citstyle: "required",
            spelling: "required",
            uploadfile: {required: function (element) {
                 if($("#filesent").is(':checked'))
                 {
                   return false;  
                 } 
                     else
                     {
                        return true;
                     } 

              }  ,
                        filesize: 8388608},
            wordsno: "required",
            cellphone: "required",
            country: "required",
            address: "required",
            paytype: "required"
        },


        highlight: function(label) {
            $(label).closest('.control-group').addClass('error');
          },
          success: function(label) {
            label
              .text('OK!').addClass('valid')
              .closest('.control-group').addClass('success');
          }
    }); 

Thanks

See Question&Answers more detail:os

与恶龙缠斗过久,自身亦成为恶龙;凝视深渊过久,深渊将回以凝视…
Welcome To Ask or Share your Answers For Others

1 Answer

0 votes
by (71.8m points)

Here's an working example: http://jsfiddle.net/Gajotres/TthG9/. My example was created from a code example taken from your link.

Code:

$(document).ready(function(){
    $('#contact-form').validate(
    {
        rules: {
            name: {
                minlength: 2,
                required: true
            },
            email: {
                required: true,
                email: true
            },
            subject: {
                minlength: 2,
                required: true
            },
            message: {
                minlength: 2,
                required: true
            }
        },
        highlight: function(label) {
            $(label).parent().find('.valid').each(function(){
                $('label[class^="valid"]').remove();       
            });
        },        
        success: function(label) {
            if(label.text('OK!').parent().find('.valid').html() == null) {
                label.removeClass('error').addClass('valid');  
            } else {
                label.remove();
            }
        }        
    });
    $("#contact-form").validate().form();
    $('label[class^="error"]:not(.valid)').remove();
})

Method .form() can be used to trigger a form validation programmatically


与恶龙缠斗过久,自身亦成为恶龙;凝视深渊过久,深渊将回以凝视…
Welcome to OStack Knowledge Sharing Community for programmer and developer-Open, Learning and Share
Click Here to Ask a Question

...