SitePoint Sponsor

User Tag List

Results 1 to 17 of 17
  1. #1
    SitePoint Zealot
    Join Date
    Feb 2011
    Posts
    101
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    jQuery or Javascript form validation on change

    Hello Guys!

    I'm sitting here with a form - With a name field, email field and a message field, and I would really like to do some "real-time" validation, so if etc I write an email wrong (or right) - then when I change or focus another element it will validate the email field, and show an X if wrong, and a check mark if it's right.

    I'm not very good at javascript or jquery at all

    I've tried using this just for testing:

    Code JavaScript:
    $("#email").change(function() {
    	var emailstring = $("#email").val();
     
    	if(emailstring.contains('@','.') == 1) {
    		return alert('problem');
    	} else {
    		return alert('no problem');
    	}
    });

    Is there anyone that can help?

    Best regards,
    Lucas Rolff

  2. #2
    SitePoint Enthusiast Anthony.Barnes's Avatar
    Join Date
    Aug 2011
    Location
    Canberra, Australia
    Posts
    80
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Since you have jQuery already you could try the validation plugin: Plugins/Validation - jQuery JavaScript Library It handles most use cases for form validation as well as ways to add your own custom validation to the form. I find it a bit clunky and if you are new to javascript then it's not really conducive to learning, but it could help you get something up and running fairly quickly.

  3. #3
    SitePoint Zealot
    Join Date
    Feb 2011
    Posts
    101
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Hey, I've been looking on both the jQuery Validation plugin, but also the JQuery Tools - What I can see in the documentation i can use "errorInputEvent" to set if I wanna use Keyup, Blur, null, change and so on.. But how do I use it? and is it the right "property" to use for getting it to validate on blur etc?

    Best regards,

  4. #4
    Unobtrusively zen silver trophybronze trophy
    paul_wilkins's Avatar
    Join Date
    Jan 2007
    Location
    Christchurch, New Zealand
    Posts
    14,678
    Mentioned
    99 Post(s)
    Tagged
    4 Thread(s)
    Quote Originally Posted by zerpex View Post
    What I can see in the documentation i can use "errorInputEvent" to set if I wanna use Keyup, Blur, null, change and so on.. But how do I use it? and is it the right "property" to use for getting it to validate on blur etc?
    I suggest that you get the validation working first with the default settings. Only after that should you look in to adjusting when it validates, if any change is considered to be needed from its default behaviour.
    Programming Group Advisor
    Reference: JavaScript, Quirksmode Validate: HTML Validation, JSLint
    Car is to Carpet as Java is to JavaScript

  5. #5
    SitePoint Zealot
    Join Date
    Feb 2011
    Posts
    101
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by paul_wilkins View Post
    I suggest that you get the validation working first with the default settings. Only after that should you look in to adjusting when it validates, if any change is considered to be needed from its default behaviour.
    Hello, I got both the validation and validate on blur working, now I only need to be able to set a check-mark if the field is validated correct.. This is my following code for activating the validation:

    Code JavaScript:
    $(".TTWForm").validator({effect:'labelMate', inputEvent:'blur'}).blur(function(e){
    var form = $(this), checkRadioValidation = validateCheckRadio();
     
    if(!e.isDefaultPrevented() && checkRadioValidation){
    $.post(form.attr('action'), form.serialize(), function(data){
    data = $.parseJSON(data);
     
    if(data.status == 'success'){
    form.fadeOut('fast', function(){
    $('.TTWForm-container').append('<h2 class="success-message">Sendt!</h2>');
    });
     
     
    //window.location = 'http://www.example.com/somePage.html';
    }
    else validator.invalidate(data.errors);
     
    });
    }
     
    return false;
    });
     
    var validator = $('.TTWForm').data('validator');

    Validation and stuff is working as it should, only the "Success Check-mark" when field validates right, would be pretty awesome!
    Last edited by paul_wilkins; Aug 11, 2011 at 00:37.

  6. #6
    Unobtrusively zen silver trophybronze trophy
    paul_wilkins's Avatar
    Join Date
    Jan 2007
    Location
    Christchurch, New Zealand
    Posts
    14,678
    Mentioned
    99 Post(s)
    Tagged
    4 Thread(s)
    Quote Originally Posted by zerpex View Post
    now I only need to be able to set a check-mark if the field is validated correct
    The validate options has a success property that can accept a function. The function accepts an argument to the error label (now the success label), so you can embed an image, or preferably apply as class name to it so that CSS can supply a suitable background image for the success.
    Programming Group Advisor
    Reference: JavaScript, Quirksmode Validate: HTML Validation, JSLint
    Car is to Carpet as Java is to JavaScript

  7. #7
    SitePoint Zealot
    Join Date
    Feb 2011
    Posts
    101
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by paul_wilkins View Post
    The validate options has a success property that can accept a function. The function accepts an argument to the error label (now the success label), so you can embed an image, or preferably apply as class name to it so that CSS can supply a suitable background image for the success.
    The problem is that I'm using the jQuery tools validator I liked above, which doesn't support SuccessClass from that you linked, And That tool is just awesome I think, but maybe I should try include the Validation plugin instead, I will try later

  8. #8
    Unobtrusively zen silver trophybronze trophy
    paul_wilkins's Avatar
    Join Date
    Jan 2007
    Location
    Christchurch, New Zealand
    Posts
    14,678
    Mentioned
    99 Post(s)
    Tagged
    4 Thread(s)
    Quote Originally Posted by zerpex View Post
    The problem is that I'm using the jQuery tools validator I liked above, which doesn't support SuccessClass from that you linked, And That tool is just awesome I think, but maybe I should try include the Validation plugin instead, I will try later
    My bad, for some reason I though you were using jQuery's validator.

    The jQuery Tools validator documentation shows that it has an onSuccess event, of which:
    "if one or more fields are valid. The second argument is a jQuery object containing all fields that passed the validation"

    There's also an events demo that they provide.

    Do you think you can do something with that?
    Programming Group Advisor
    Reference: JavaScript, Quirksmode Validate: HTML Validation, JSLint
    Car is to Carpet as Java is to JavaScript

  9. #9
    SitePoint Zealot
    Join Date
    Feb 2011
    Posts
    101
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by paul_wilkins View Post
    My bad, for some reason I though you were using jQuery's validator.

    The jQuery Tools validator documentation shows that it has an onSuccess event, of which:
    "if one or more fields are valid. The second argument is a jQuery object containing all fields that passed the validation"

    There's also an events demo that they provide.

    Do you think you can do something with that?
    For some reason the demo's havent worked for me in Safari, Chrome or Opera :S - But yeah, now I just need to find a way to implement it to each field so it shows the check-mark right to the input field.

  10. #10
    Unobtrusively zen silver trophybronze trophy
    paul_wilkins's Avatar
    Join Date
    Jan 2007
    Location
    Christchurch, New Zealand
    Posts
    14,678
    Mentioned
    99 Post(s)
    Tagged
    4 Thread(s)
    Quote Originally Posted by zerpex View Post
    For some reason the demo's havent worked for me in Safari, Chrome or Opera :S - But yeah, now I just need to find a way to implement it to each field so it shows the check-mark right to the input field.
    Oh dear. If even the demo from the developers doesn't work, that may be indicative of deeper issues that lie within the code itself.

    It's a good thing that we have demos to help us discover this before we try to solve the same problem with our own efforts, eh?
    Programming Group Advisor
    Reference: JavaScript, Quirksmode Validate: HTML Validation, JSLint
    Car is to Carpet as Java is to JavaScript

  11. #11
    SitePoint Zealot
    Join Date
    Feb 2011
    Posts
    101
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by paul_wilkins View Post
    Oh dear. If even the demo from the developers doesn't work, that may be indicative of deeper issues that lie within the code itself.

    It's a good thing that we have demos to help us discover this before we try to solve the same problem with our own efforts, eh?
    Nah the code works if I test it on my own server I see, I just tried copy/paste into a new document, and it seems to work okay, but getting it implamented in the code above, then I'm lost, I'm not the best jQuery and JS dude

  12. #12
    Unobtrusively zen silver trophybronze trophy
    paul_wilkins's Avatar
    Join Date
    Jan 2007
    Location
    Christchurch, New Zealand
    Posts
    14,678
    Mentioned
    99 Post(s)
    Tagged
    4 Thread(s)
    Quote Originally Posted by zerpex View Post
    Nah the code works if I test it on my own server I see, I just tried copy/paste into a new document, and it seems to work okay, but getting it implamented in the code above, then I'm lost, I'm not the best jQuery and JS dude
    Here we help people to improve their skills at such things. If you would rather not do it yourself, I kindly suggest that you consider employing someone else (not from here in particular, just in general) to do the work for you.

    Most of us here are happy to volunteer our time to help people learn, but beyond that we can have a difference of opinion.
    Programming Group Advisor
    Reference: JavaScript, Quirksmode Validate: HTML Validation, JSLint
    Car is to Carpet as Java is to JavaScript

  13. #13
    SitePoint Zealot
    Join Date
    Feb 2011
    Posts
    101
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by paul_wilkins View Post
    Here we help people to improve their skills at such things. If you would rather not do it yourself, I kindly suggest that you consider employing someone else (not from here in particular, just in general) to do the work for you.

    Most of us here are happy to volunteer our time to help people learn, but beyond that we can have a difference of opinion.
    Indeed, I'm not asking for the code - I'm really trying myself to get it fixed, as I did with the "real-time" Validation thing, but hints are always way more helpful, and often a good help to solve the problem myself - So surely I'm not asking for the code (I'm not learning anything if I just get the code)

  14. #14
    Unobtrusively zen silver trophybronze trophy
    paul_wilkins's Avatar
    Join Date
    Jan 2007
    Location
    Christchurch, New Zealand
    Posts
    14,678
    Mentioned
    99 Post(s)
    Tagged
    4 Thread(s)
    Quote Originally Posted by zerpex View Post
    Indeed, I'm not asking for the code - I'm really trying myself to get it fixed, as I did with the "real-time" Validation thing, but hints are always way more helpful, and often a good help to solve the problem myself - So surely I'm not asking for the code (I'm not learning anything if I just get the code)
    That's a relief to know. You don't know the types of people we get around here at times.

    It's late at night for me now, so we'll see if someone else can help before I get back to things when daylight arrives.
    Programming Group Advisor
    Reference: JavaScript, Quirksmode Validate: HTML Validation, JSLint
    Car is to Carpet as Java is to JavaScript

  15. #15
    Unobtrusively zen silver trophybronze trophy
    paul_wilkins's Avatar
    Join Date
    Jan 2007
    Location
    Christchurch, New Zealand
    Posts
    14,678
    Mentioned
    99 Post(s)
    Tagged
    4 Thread(s)
    Quote Originally Posted by paul_wilkins View Post
    That's a relief to know. You don't know the types of people we get around here at times.

    It's late at night for me now, so we'll see if someone else can help before I get back to things when daylight arrives.
    In the mean-time, this appears to be a valid solution from Add validation image for success/fail

    Code javascript:
    .validate({
      success: function(label) {
         label.addClass('valid');
      }
    });
    Programming Group Advisor
    Reference: JavaScript, Quirksmode Validate: HTML Validation, JSLint
    Car is to Carpet as Java is to JavaScript

  16. #16
    SitePoint Zealot
    Join Date
    Feb 2011
    Posts
    101
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by paul_wilkins View Post
    In the mean-time, this appears to be a valid solution from Add validation image for success/fail

    Code javascript:
    .validate({
      success: function(label) {
         label.addClass('valid');
      }
    });
    Thank you a lot!

    I will see if I can get it working, and sleep well

  17. #17
    SitePoint Zealot
    Join Date
    Feb 2011
    Posts
    101
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Hello, ive been sitting yesterday and today trying to get it work, i ended up Breaking the code, but Got it rebuild, but still having the problem with checkmark :/


Tags for this Thread

Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •