SitePoint Sponsor

User Tag List

Results 1 to 17 of 17

Hybrid View

  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,527
    Mentioned
    84 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,527
    Mentioned
    84 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


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
  •