Well I have sorted the problem of the span when there is a sucess on
the input. I have added these two lines to the success method:
label.prev('form :input').addClass('valid');
$('form :input').filter('.valid').prev('label').find('span').hide();
My problem is now that when there is an on the input I cant seem to
sort it out when there is an error on keyup? Should I use
errorPlacement? I cant seem to find much documentaion on it though?
Cheers
Tuppers
On Jul 27, 9:01 am, Tuppers360 <[email protected]> wrote:
> Thanks for that! I thought of doing something like that but it means
> validating twice really so I was thinking that when the validation
> call is done and the field, whatever it may be is correct then it
> removes the span.
>
> Problem is I dont get where the plugin adds the checked class I know
> that it does add a checked class as I have a css file to add an image
> when there is 'label.checked' I have tried find the labels with this
> class to then find the span class from and then hide the span there
> but I cant seem to find it!
>
> I hope you understand that?
>
> On Jul 26, 11:10 pm, FrenchiINLA <[email protected]> wrote:
>
>
>
> > how about
>
> > $('input[type=text]').keyup(function() {
>
> > if ($(this).val().length == 2) {
> > $(this).prev().find('span').empty();
> > }
> > });
>
> > On Jul 26, 10:36 am, Tuppers360 <[email protected]> wrote:
>
> > > Hi there just wondering if I can get some help from you guys?
>
> > > I have some code as per:
>
> > > // validate signup form on keyup and submit
> > > var validator = $('form').validate({
> > > event: 'keyup',
> > > rules: {
> > > '<%= ddlRank.UniqueID %>': {
> > > required: true
> > > },
> > > '<%= txtSurname.UniqueID %>': {
> > > minlength: 2,
> > > required: true
> > > },
> > > '<%= txtForename.UniqueID %>': {
> > > minlength: 2,
> > > required: true
> > > },
> > > '<%= ddlGender.UniqueID %>': {
> > > required: true
> > > },
> > > '<%= txtBirthDate.UniqueID %>': {
> > > required: true,
> > > custEmailVal: true
> > > }
>
> > > }, //end rules
> > > messages: {
> > > '<%= txtSurname.UniqueID %>': {
> > > minlength: jQuery.format("Enter at least {0}
> > > characters"),
> > > required: "This field is required"
> > > },
> > > '<%= txtForename.UniqueID %>': {
> > > minlength: jQuery.format("Enter at least {0}
> > > characters"),
> > > required: "This field is required"
> > > },
> > > '<%= ddlGender.UniqueID %>': {
> > > required: "This field is required"
> > > },
> > > '<%= txtBirthDate.UniqueID %>': {
> > > required: "This field is required"
> > > }
> > > }, //end messages
> > > // specifying a submitHandler prevents the default
> > > submit, good for the demo
> > > submitHandler: function() {
> > > alert("submitted!");
> > > }, //end submitHandler
> > > // set this class to error-labels to indicate valid
> > > fields
> > > success: function(label) {
> > > // set as text for IE
> > > label.html(" ").addClass("checked");
> > > $('label.checked').addClass('alt');
> > > //$('form :input')
> > > // .filter('.required').prev
> > > ('label.checked').find('span').hide();
> > > }, //end success function(label)
> > > invalidHandler: function(form, validator) {
> > > var errors = validator.numberOfInvalids();
> > > if (errors) {
> > > var message = errors == 1
> > > ? 'You missed 1 field. It has been
> > > highlighted'
> > > : 'You missed ' + errors + ' fields. They have
> > > been highlighted';
> > > $('<div></div>')
> > > .attr({
> > > 'id': 'submitError',
> > > 'class': 'warning'
> > > })
> > > .insertBefore('#newuserForm');
> > > $("div#submitError").html(message);
> > > $("div#submitError").show();
> > > $('form :input')
> > > .filter('.required').prev('label').find
> > > ('span').hide();
> > > } else {
> > > $("div#submitError").hide();
> > > }
> > > } //end invalidHandler
> > > }); //end validate all
>
> > > my html is an ordered list and the within each li tag I have this
> > > structure:
>
> > > <label for="txtSurname" id="lblSurname">
> > > Surname:<span>(required)</span>
> > > </label>
> > > <input name="txtSurname" type="text"
> > > id="txtSurname" class="inputText required" />
>
> > > What I want to happen is when I have input two characters into the
> > > field so that it validates is to hide the span containing the word
> > > required. I cant seem to find it though! I am not sure if am am right
> > > though in using the success function with the argument label?? Can
> > > anyone see how i ould possibly get around this?
>
> > > I have had sucess with using the invalidHandler hiding the span but I
> > > cant hide it on only the one span at a time on the fly.
>
> > > Hope I explained myself!
>
> > > Tuppers- Hide quoted text -
>
> > - Show quoted text -- Hide quoted text -
>
> - Show quoted text -
