Hello, my name is Jan Jarfalk and I am an interaction designer and interface developer.

I’ve been working professionally with the web since 2002. Back then I had my own company and did everything myself. Now I am a bit more specific - I do usability, accessibility and a lot of client side coding. This, Unwrongest, is my personal lab. This is where I try, learn and evolve.

I am a Swedish citizen from Stockholm that currently lives and works in Sydney, Australia. From here I work for Getupdated's Stockholm based division 'Social Media', where we help our clients to create social networks.

I put function, before design. I love beautiful interfaces, but I like them simple and obvious. I like things that are fast and responsive. Take a look at my projects and I am certain you will notice and appreciate my slipstreamed approach.

Valid8 solves both simple and complex validation scenarios. Everything from a basic required field to regular expressions, ajax requests and arbitrary javascript functions. There is nothing you can’t validate using Valid8.

Sunday, 23 June 2009
I am currently rewriting this documentation.
New segments will pop-up as I write them.
I will twitter with janjarfalk as soon as I am done.

Valid8 features support for three types of validation techniques; Regular expressions, custom javascript functions and Ajax requests. The three techniques can be combined in any way you want. For example, in a very extreme case, you can use two regular expressions, one javascript function and three ajax requests for validating a single input field.

    1) Regular expressions
    For determining whether a value matches a regular expresion. For example determining if a user name consists of only letters and numbers.
    2) Javascript functions
    Send one or multiple values to a custom function. For example checking if the ‘password’ and the ‘confirm password’ input field matches each other.
    3) Ajax requests
    Post one or multiple values to a external file. For example to see if a user name already exists in the database.

Examples and demos

Valid8 ranges from super simple ‘making an input field required’ to an near endless possibility of complexity. I think the best way for me to describe how Valid8s individual parts is by showing you a set of examples.

    How to make an input field required
    This example will show you how to make an input field required and show the default validation message ‘Required’ if the field is left empty.
    How to make an input field required and show a custom error message
    This example will show you how to make an input field required and show a custom validation message if the field is left empty.
    How to validate with a single regular expression
    This example will show you how to validate using a regular expression that dictates that the input field(s) only can contain letters and numbers.
    How to validate with multiple regular expressions
    This example will show you how to validate using two regular expressions. One that dictates that the input field is required and one that the input field only can contain letters and numbers. Valid8 will show a different validation message depending on which regular expression it violates first.
    How to validate with a javascript function
    This is example will show you how to compare the Password field with the Confirm Password field and make Confirm Passoword invalid if it doesn’t match the Password field.
    How to validate using an ajax request
    This example will show you how to make see if an email address already is in your database.

Example – How to make an input field required

Calling the valid8 method without any arguments will show the default validation error message ‘Required’ if the input field is left empty.

    $('#inputUsername').valid8();


Example – How to make an input field required and show a custom error message

Calling the valid8 method with a string as an argument will show the string as an a validation error message if the input field is left empty.

    $('#inputUsername').valid8('Username is required');


Example – How to validate with a single regular expression

The example below is using a regular expression that dictates that the input field(s) only can contain a-z, A-Z and 0-9. If the value contains for example the character ‘@’ the validation message ‘You can only use the letters A-Z and numbers’ will be shown.

    $('#inputUsername').valid8({
        'regularExpressions': [
            { expression: /^[a-zA-Z0-9]+$/, errormessage: 'You can only use the letters A-Z and numbers'}
        ]
    });


Example – How to validate with multiple regular expressions

The example below is using two regular expressions that dictates that the input field(s) not can be empty and only can contain a-z, A-Z and 0-9. If the value contains for example the character ‘@’ the validation message ‘You can only use the letters A-Z and numbers’ will be shown. If the field is left completely empty it will show the validation message ‘Field is required’.

    $('#inputUsername').valid8({
        'regularExpressions': [
	    { expression: /^.+$/, errormessage: 'Username is required'},
        { expression: /^[a-zA-Z0-9]+$/, errormessage: 'You can only use the letters A-Z and numbers'}
        ]
    });


Example – How to validate with a javascript function

In this example validates the input field ‘#inputPasswordVerification’ and see if it matches the input field ‘#inputPassword’. If it doesn’t match the validation message ‘Passwords does not match’ will be shown.

function doesPasswordFieldsMatch(values){
    if(values.password == values.verification)
        return {valid:true}
    else
        return {valid:false, message:'Passwords does not match'}
}

$('#inputPassword').valid8('Password is required');
$('#inputConfirmPassword').valid8({
    'jsFunctions': [
        { function: doesPasswordFieldsMatch, values: function(){
                return { password: $('#inputPassword').val(), verification: $('#inputConfirmPassword').val() }
            }
        }
    ]
});


Example – How to validate with an ajax request

This example will post the value of the input field ‘#inputEmail’ to isEmailUnique.php.

	$('#inputEmail').valid8({
	    'regularExpressions': [
	        { expression: /^[a-z0-9!#$%&'*+/=?^_`{|}~-]+(?:\.[a-z0-9!#$%&'*+/=?^_`{|}~-]+)*@(?:[a-z0-9](?:[a-z0-9-]*[a-z0-9])?\.)+[a-z0-9](?:[a-z0-9-]*[a-z0-9])?$/, errormessage: 'Email is not valid'},
            ],
	    'ajaxRequests': [
	        { url: 'lib/isEmailUnique.php' }
	    ]
	});
$email = $_POST['value'];

if(!isEmailUnique($email)){
	$json["valid"] = false;
	$json["message"] = 'Email is already in use';
}
else {
	$json["valid"] = true;
}

function isEmailUnique($email){
	// Database look-up should go here here...
	// But for the sake of this demo a random return will do
	return rand(0, 1);
}

print json_encode($json);


Change log
Version Changes
1.3 Valid8 now uses triggers instead of callback functions
1.2.2 Fixed a bug related to checkbox validation
1.2.1 Fixed a bug in IE7
1.2 Faster, harder, stronger.
1.1.2 Fixed a spelling mistake
1.1.1 Fixed a bug where white-spaces would pass the default validation regexp. (Thanks to Srinivas Tamada for reporting the bug)
1.1 Changed the variable validationEvent to validationEvents. It can now take both strings (eg. ‘keyup’) and arrays with strings (eg: ['keyup','blur']).

Comments

  • 09 Feb 2009 | daniel says:

    it doesnt work with Chrome :/

  • @daniel:
    The error was in the demo implementation. I’ve uploaded a new demo. Thanks for the feedback!

  • [...] Go here to see the original:  Valid8 – Amazingly easy input validation (jQuery plugin) | Unwrongest [...]

  • User name : ‘ ‘ (space) also accepting

  • @Srinivas Tamada
    Thanks Srinivas Tamada, I added a trim to the value before validation.

  • 03 Apr 2009 | dyu says:

    reguglarExpressions <– is this intentional?
    I noticed that in your demo.

    Cheers

  • @dyu:
    Euhm, no. That shouldnt be. It’s the result of negligence and a powerful auto-complete feature in Textmate. I will have it fixed.

  • 08 Apr 2009 | Fedir says:

    Is it possible to use custom functions in the case of error ? For example, if we would like not to use error message in pop-up, but to insert the text of notification inside a dedicated field ?

  • @Fedir:
    Absolutley: Use the options variable onError

    $(‘#inputUsername’).valid8({
    regularExpressions: [
    {expression: /^.+$/, errormessage: 'Username is required'},
    {expression: /^([a-zA-Z0-9_\.\-])+$/, errormessage: ‘Username is invalid’}
    ],
    onError: function(){}
    });

    • 05 Jul 2009 | gmm says:

      Hi Jan,
      Can you please show a small example on how to use the onError variable with Valid8.
      I would like to display the errors in one place on the form, regardless wich input generated the error.

      Thank you very much, this is a great help.
      gmm

      • Sure!
        Create a div and call it errors:
        And then do like this:

        $('#inputEmail').valid8({
        regularExpressions: [
        	{expression: re, errormessage: 'Not Valid'}
        ],
        onError: function (messages, el, event){
        	$.each(messages,function(){
        		$('#yourErrorsWrapper').html(this.toString());
        	})
        }
        });
        
  • Hi, nice little plugin, though a suggestion.

    As it is, the validation has some accessibility issues. Any emphasis made using color (red bad, green good), should also be understood without color. Bold it, underline it, box it, but just add something other than color alone. Perhaps the ubiquitous green “ok” check and the red “X” error icons? There’s a gorgeous free icon set over at http://www.famfamfam.com/

    Also, the email validation doesn’t really “force the user to write a *valid* email address.” I used wee@w.ctt which obviously isn’t real (it just *looks* like a valid email addy), though that’s about all you can do with JavaScript!

    • How you show valid/unvalid inputs is not a part of the plugin. The plugin sets the classname error and valid on the inputs parent. So if you want to show an image, make the text bold or just about anything, you can do that.

      Any validation you do on the client-side has do be done again on the server or in the case of the email, by sending an activation link to that email. It just acts as a help for the user, nothing else.

  • [...] jQuery Plugin – Valid8 – Amazingly easy input validation jQuery plugin – Jan Jarfalk (Suggested by Elijah Manor) [...]

  • 03 Jun 2009 | Adarsh says:

    Hi Jan. Your valid8 plugin has lots of bugs … for just example let me enter a@a@a.coma.coma.coma.coma.coma.coma.coma.coma.coma.coma.coma.coma.coma.com

    Above thing it is taking as valid email id … please can you check it?

    Thanx …

  • 09 Jun 2009 | Phil says:

    An error opening this page in IE7, I use Firefox 3 and it doesn’t have any errors but I want my pages to work for IE7 as well.

    The error is:

    Line 46:
    Error: Expected identifier, string or number

  • 09 Jun 2009 | Phil says:

    further detail on the above error via IE DebugBar:

    Line: 47
    Character: 15
    Code: 0
    Error Message: Expected identifier, string or number
    URL: http://sandbox.unwrongest.com/forms/jquery.valid8.js.html

  • 09 Jun 2009 | Phil says:

    Another error but in my application, IE7 complains about the line 204 in the jquery.valid8-1.2.source.js file.

    Using my code (Password_input is an input box):

    $(‘#Password_input’).valid8(‘A password is required’);

    Message:

    Line 204
    Error: ’0′ is null or not an object

  • 09 Jun 2009 | Joe says:

    Is there a way to unbind the validation from an element once I have loaded the page? I want to have a button to turn off and on validation.

    Thanks

  • 11 Jun 2009 | Phil says:

    Sent you an email Jan with another bug/problem related to JavaScript methods causing me errors.

  • 12 Jun 2009 | Phil says:

    Nice work Jan :)

    Same as Joe, have two fields that are required unless a checkbox is ticked. Need a way to stop valid8 from displaying the required message when the input is disabled.

  • 30 Jun 2009 | Clamm says:

    Actually the recommended pattern (not in the examples above) ignores uppercase… a-zA-Z0-9 would be better…

  • 06 Jul 2009 | Nathan Gonzalez says:

    for those of you wanting a quick and easy way to remove validation, follow these instructions.

    replace isValid function with this block:

    isValid: function() {
    var valid = true;
    this.each(function() {
    if ($(this).data(‘useValid8′) == true) {
    validate(this);
    if ($(this).data(‘valid’) == false)
    valid = false;
    }
    });
    return valid;
    }
    unValid8: function() {
    return this.each(function() {
    if ($(this).data(‘useValid8′) == true)
    kill(this);
    });
    }

    replace initializeDataObject function with this block:

    function initializeDataObject(el) {
    $(el).data(‘useValid8′, true);
    $(el).data(‘loadings’, new Array());
    $(el).data(‘errors’, new Array());
    $(el).data(‘valids’, new Array());
    $(el).data(‘keypressTimer’, null);
    }

    add these 3 functions right underneath the setMessage function:

    function killDataObject(el) {
    $(el).data(‘useValid8′, false);
    };

    function kill(el) {
    deActivate(el);
    killDataObject(el);
    };

    function deActivate(el) {
    var events = $(el).data(‘settings’).validationEvents;
    if (typeof events == ‘string’)
    $(el).unbind(events);
    else {
    $.each(events, function(i, event) {
    $(el).unbind(event);
    });
    }
    };

    from this point forward all you’ll need to do is remove validation is something akin to $(‘#myID’).unValid8().

    • Wooohaaa! Thanks, Nathan Gonzalez!

    • 13 Jul 2009 | Kristoffer says:

      Just a small thing, you’re missing a comma after the isValid function, so it’ll be

      isValid: function() {
      var valid = true;
      this.each(function() {
      if ($(this).data(’useValid8′) == true) {
      validate(this);
      if ($(this).data(’valid’) == false)
      valid = false;
      }
      });
      return valid;
      },
      unValid8: function() {
      return this.each(function() {
      if ($(this).data(’useValid8′) == true)
      kill(this);
      });
      }

      It works very well by the way, thanks for sharing.

  • 07 Jul 2009 | Phil says:

    Can’t seem to get a $.post() jQuery statement to work inside a function that valid8 uses.

    My scenario is that on an edit form I only want to make an ajax request if the value is different from the existing value.

    var isUsernameOK = function(values) {
    if (values.username != values.old_username) {
    var temp;
    $.post(‘/Check/Username’, { value: values.username }, function(data) {
    temp = data;
    });
    return temp;
    } else {
    return { valid: true };
    }
    };

    $(‘#Username_input’).valid8({
    ‘regularExpressions’: [
    { expression: /^.+$/, errormessage: $("#Lang_Users_Missing_Username").html() },
    { expression: /^[a-zA-Z0-9.-_]+$/, errormessage: $(“#Lang_Users_Username_Invalid”).html() }
    ],
    ‘jsFunctions’: [
    { 'function': isUsernameOK, 'values': function() {
    return { 'username': $('#Username_input').val(), 'old_username': $("#Username_old_hidden").val() }
    }
    }
    ]
    });

    I get an error when the AJAX call happens, works fine initially as the values are the same and doesn’t do an ajax call.

    validator.function(values) is undefined
    if(validator['function'](values).valid)
    Line 129 of the source file

    • Your code will do “return temp;” before $.post() is ready. You need to use the $.post callbacks. (success, error… )

  • 10 Jul 2009 | Clamm says:

    Is there away to abort further validation if it matches s.th.?

    Would be handy in my case… Tried everything but this script is a bit too advanced for me ;-) Thank You!

  • 10 Jul 2009 | Nathan Gonzalez says:

    found a “bug”, though i think it may be in part due to poor design by myself. i have a page with multiple instances of the same form created on the fly, top level form having a uniqueid, but the the inputs in each form had identical ids. this gave setMessage() some problems as it currently looks for a validation message with the same id in the entire page. to fix this i gave it the context of the current control’s parent. see below for the revised function.

        function setMessage(messages, el) {
            var parent = $(el).parent();
            var elementId = el.id + "ValidationMessage";
            var elementClass = 'validationMessage';
            if (!parent.children('#' + elementId).length > 0)
                parent.append('');
    
            parent.children('#' + elementId).html("");
            parent.children('#' + elementId).text(messages[0]);
        };
    
    • Yes, won’t fix that. :)
      IDs should always be unique.

      • 12 Jul 2009 | Nathan Gonzalez says:

        figured that would be the answer, mainly just posting in case anyone else had the same design flaw.

  • 15 Jul 2009 | Clamm says:

    Hi Jan,… We are sitting here around now for quite a long time (last 4 nights after university) and we just dont get it working. We have the same problem as guy mentioned above: Only make an ajax call if the new value differs from the old one. But it just dont works. Whatever we tried… the return of valid:false just doesnt work!? Could you please take a look at it?! Any ideas??? Help would be really, really appreciated… Thank you in advance!

    function checkMailAdress(values){

    if (values.adress == “”)
    return {valid:false, message:’An E-Mail adress is required’}

    else if (!re.test(values.adress))
    return {valid:false, message:’Are you sure you typed it right?’}

    //Only make an ajax call if its really needed
    else if ( values.adress != “get_property(‘email’)); ?>” ){

    var values = {value: values['adress']};

    $.ajax({
    type: “POST”,
    url: “_ajax/joinDataCheck.php?check=email”,
    data: values,
    async: false,
    complete: function(data, textStatus){
    if (data.responseText != ‘{“valid”:true}’){
    window.console.log(“NOT valid”);
    return {valid:false, message:’Sorry, E-mail is already in use’};
    } else {
    window.console.log(“valid”);
    }
    }
    });
    }
    else
    return {valid:true, message:’Thank You’}
    }

    $(‘#edit-mail’).valid8({
    jsFunctions: [
    { function: checkMailAdress, values: function(){return { adress: $('#edit-mail').val()}}}
    ]
    });

    • Why don’t you use ‘ajaxRequests’ for ajax requests.
      This should work fine.

      	function checkEmail(args){
      		if(args.email != 'jan.jarfalk@unwrongest.com')
      			return {valid:true}
      		else
      			return {valid:false, message:'Same again'}
      	}
      
      	$('#inputPassword').valid8({
      		jsFunctions:[
      			{ 'function': checkEmail, 'values': function(){
      				return { email: $('#inputPassword').val() }
      			}}
      		],
      		ajaxRequests: [
      			{ url: 'isEmailUnique.php', loadingmessage: 'Checking...'}
      		]
      	});
      

      The only thing you do in the javascript function is checking if it is the old email or not. It won’t fire the ajaxRequest if checkemail is unvalid.

  • 16 Jul 2009 | Clamm says:

    ;-) Yes we have been once at this solution also… But what actually happens is that it will return false if the username is the same… But in our case its ok to leave the same name. (Form where user can decide which fields he want to change or leave as is) Returning “true” in your above sample wont work… We are trying now to disable and re-enable validation with another script. Thank You… I’ll post the solution if our enable-diable attempt succeeded. Thats the last idea we have ;-) But really wanna say “Thank You!”

  • 18 Jul 2009 | Kristoffer says:

    Hi Jan, I’ve run into a problem I can’t seem to locate. I have a form that can be changed from a login form to a registration form and back. The thing is, when I get the registration form the first time and fail the validation for the password field, the error shown is the one from the email field (It’s also placed as the emailValidationMessage).

    However, if I change back to login and then change to the registration form a 2nd time, it works perfectly – And this is the case every time, and in both Safari and Firefox. Any idea what could be wrong?

    The code that is giving me problems:
    http://pastie.org/private/9irzy4rt71qxgr4c4z36fg

  • [...] this a nifty jquery plugin Valid8 provides a easy to use 4 line code to insert validation in any form !, Valid8 provides various [...]

  • Another validation tool using jQuery but requiring no coding at all is http://vanadiumjs.com

  • [...] Valid8 von Jan Jarfalk ist ein jQuery-PlugIn zur Formularvalidierung. [...]

  • 27 Aug 2009 | Nub says:

    Maybe i’m a bit of a noob :) but how the heck do you manage to actually submit the form after the validation of all fields ?

  • Hi All,

    Great job Jan!

    I’ve found this plugin to be very usefull, but needed it to not shift other page elements around. Due to the customer requirements and the way the form was designed, the validation needed to be a little less pushy on the canvas. Also, I wanted a warning image to appear before the message and the error message to disappear when the input field received focus. Soooo, if there is anyone else that needs the same, the changes I made follow.

    I’m not a jquery expert, so I welcome any comments.

    defaults from:
    var defaultOptions = {
    regularExpressions: [],
    ajaxRequests: [],
    jsFunctions: [],
    onLoading: defaultOnEvent,
    onValid: defaultOnEvent,
    onError: defaultOnEvent,
    validationEvents: ['keyup','blur'],
    validationFrequency: 1000,
    values: null,
    defaultErrorMessage: ‘Required’
    };

    defaults to:
    var defaultOptions = {
    regularExpressions: [],
    ajaxRequests: [],
    jsFunctions: [],
    onLoading: defaultOnEvent,
    onValid: defaultOnEvent,
    onError: defaultOnEvent,
    validationEvents: ['keyup','blur','focus'],
    validationFrequency: 1000,
    values: null,
    defaultErrorMessage: ‘Required’
    };

    handleEvents from:
    function handleEvent(e, el){
    if(e.keyCode && $(el).attr(‘value’).length > 0) {
    clearTimeout($(el).data(‘keypressTimer’));
    $(el).data(‘keypressTimer’,setTimeout(function() {
    validate(el);
    }, $(el).data(‘settings’).validationFrequency));
    }
    else if(e.keyCode && $(el).attr(‘value’).length 0) {
    clearTimeout($(el).data(‘keypressTimer’));
    $(el).data(‘keypressTimer’,setTimeout(function() {
    validate(el);
    }, $(el).data(‘settings’).validationFrequency));
    }
    else if(e.keyCode && $(el).attr(‘value’).length 0)
    parent.append(”);

    $(‘#’+elementId).html(“”);
    $(‘#’+elementId).text(messages[0]);
    };

    setMessage to:
    function setMessage(messages,el) {
    var absoluteTop = parseInt($(el).position().top+$(el).height());
    var absoluteLeft = parseInt($(el).position().left);
    var absoluteWidth = $(el).width()
    var absoluteHeight = $(el).height()+15;

    var parent = $(el).parent();
    var elementId = el.id + “ValidationMessage”;
    var elementClass = ‘validationMessage’;
    if(!$(‘#’+elementId).length > 0) {
    parent.append(”);
    }

    $(‘#’+elementId).html(“”);
    $(‘#’+elementId).text(messages[0]);
    };

    css from:
    .w.error { background-color: #EFD8D7; }
    .w.error .input { border-color: #C8A5A5; background: #fff url(‘gfx/icon_error.png’) no-repeat right center; }

    .w.valid { background-color: #A4EFAE; }
    .w.valid .input { border-color: #A5C8A6; background: #fff url(‘gfx/icon_valid.png’) no-repeat right center; }
    .w.valid span { display: none; }

    css to (I did not wrap the input fields with class=w:
    .error { font-weight:bold;color:#fd2a2a; }
    .error span { background-color:#fdf4f4;opacity: .90; filter:Alpha(Opacity=90);padding-left:2em;background: snow url(‘../images/warning.png’) no-repeat left center; }

    .valid span { display: none; }

  • 03 Sep 2009 | Adel says:

    Thanks for the great script.
    everything works fine for me but the form submits even if there are errors in the input. I tried to cancel the form submission by handling the onSubmit event of the form but the isValid function of valid8 doesn’t return false as expected and I can’t figure out a way of checking if there are errors found by the valid8 script.
    Would really appreciate your help.
    Thanks,

  • @Adel

    The isValid function does work. I have it working fine. Below is an example of how I’m using it currently. I have a member form which has two jquery tabs. I allow the user to go to any form element on the page without validating until they click the next button. At that time I call valid8 on each of the form elements. If valid8 finds an error it reports it as normal, but I also call isValid and count any errors. If at the end there are any errors, I don’t allow user to switch to next tab. It would be just as easy to not submit if you found any errors.

    Here’s the example:
    $(“#nexttop, #nextbot”).click(
    function(event) {
    var invalidCount = 0;
    if($(‘#firstName’).valid8({
    ‘regularExpressions’: [
    { expression: /^.+$/, errormessage: 'Your first name is required'},
    { expression: /^[a-zA-Z]+$/, errormessage: ‘You can only use the letters A-Z’}
    ]
    }).isValid() != true) { invalidCount++ };

    if($(‘#lastName’).valid8({
    ‘regularExpressions’: [
    { expression: /^.+$/, errormessage: 'Your last name is required'},
    { expression: /^[a-zA-Z]+$/, errormessage: ‘You can only use the letters A-Z’}
    ]
    }).isValid() != true) { invalidCount++ };

    if($(‘#mAddress’).valid8({
    ‘regularExpressions’: [
    { expression: /^.+$/, errormessage: 'Your mailing address is required'},
    { expression: /^[a-zA-Z0-9\#]+$/, errormessage: ‘You can only use the letters A-Z, numbers and #’}
    ]
    }).isValid() != true) { invalidCount++ };

    if(invalidCount == 0) {
    $(“#joinTabs”).tabs( ‘select’ , 1 );
    $(“#nexttop, #nextbot”).addClass(“ui-helper-hidden”);
    $(“#prevtop, #prevbot”).removeClass(“ui-helper-hidden”);
    $(“#printtop, #printbot”).removeClass(“ui-helper-hidden”);
    $(“#savetop, #savebot”).removeClass(“ui-helper-hidden”);
    }
    });

    Hope that helps!

  • 11 Sep 2009 | Rafael Almeida says:

    Hi, i need a help to use a “jsFunctions”, in this case I’m using a function that validade all inputs with a specifc “alt”. So I need to the value of the input has been validated by valid8 to pass as arg to my function.

    My code:

    $(‘input[alt=ip]‘).valid8({
    regularExpressions: [
    {... }
    ],
    jsFunctions:[
    { 'function': validateIP, 'values': function(){
    return {ip: $("Here a had to pass input selector").val()}
    }}
    ]
    });

    Sorry my english, I’m brazillian.

    • 09 Jan 2010 | Louis says:

      I disabled the submit button with jQuery and I would like to enable the button only if all my form elements are valid.
      How would I do that?
      Hope you can help.

  • 06 Oct 2009 | Andreas says:

    Besides validating when a field looses focus (blur) I want to validate all my fields when the user presses a button. (Because maybe the user don’t ever focus one field and leaves it.)

    ..and if all fields validates ok, I want to post to the server. If some field validations fail, I want to show all the errormessages.

    How can I do that?

  • 15 Oct 2009 | Shaw Zhang says:

    It is a good library.

    However I found I have an autocomplete field, when I apply the field with valid8, the autocomplete function does not work anymore. Could this library be modified so that it will preserve existing ‘blur”, ‘keyup” actions on the field?

    Thanks,

  • 16 Oct 2009 | Shaw Zhang says:

    Never mind about my last message. valid8 works well with autocomplete. My mistake in coding. Sorry for the confusion.

  • 16 Oct 2009 | Jehal says:

    hm, is it possible to hide an #input if another #input is not valid ?

  • 19 Oct 2009 | Thomas St. says:

    Is it possible to prevent a form to be sumbitted if one ore more fields failed the checks?

  • 03 Dec 2009 | Marco says:

    Is there anyway to have the validation run on page load? I tried adding ‘load’, ‘onload’ and ‘onLoad’ to the validationEvents none of which work (hover does but that’s not what I’m looking for)

  • 13 Dec 2009 | mirco says:

    hi,
    good work!

    how can i re-validate automatically an input field changed with .val’s jquery function?
    $(“selector”).val(“new value”);

  • 20 Dec 2009 | line says:

    could you add required number of character to verify?

  • I’m having an issue when I use “onError”.
    I have a username field, and it’s has regular expressions to filter the correct input, then it has an AJAX call to ensure the username doesn’t exist (using .NET handler page for this – it all works fine).
    Trouble is, I need to ‘count’ for each field that has passed validation, so I can show the submit button. I thought I’d use the onError function, but for some reason it stops the regular expression for working properly, and the AJAX call doesn’t seem to callback properly (my animated GIF stays permanently!).

    My code:-

    $(‘#tbUsername’).valid8({
    regularExpressions:
    [
    { expression: /^.+$/, errormessage: 'Username is required' },
    { expression: /^[a-zA-Z0-9]+$/, errormessage: ‘Username can only contain A-Z and 0-9′ },
    { expression: /^.{6,16}$/, errormessage: ‘Username must be between 6-16 characters only’ }
    ],
    ajaxRequests:
    [
    { url: '_usr.ashx', loadingmessage: 'Checking availability...' }
    ],
    onError:function(event)
    {
    // do something…
    }
    }
    )

  • 27 Jan 2010 | Riko87 says:

    doesn’t function with radio button.. it’s true?

  • 10 Mar 2010 | Gialby says:

    Hi,
    your project its nice. I like your css coding, but can be more nice if you put something also for select box and checkbox.
    I build some form from your code, but now i need to validate selectbox value, but i dont know how…(yes maybe with a function..but you can give me some example).
    Another problem is when validate is wrong for select box how i can set/change style?

  • Hi, great script. Good work. But is there a way to validate emails and websites. So that a specific email or website must be enter like : aa@aa.de – minimum two letters than @ than minimum two letters than dott and than de,com,net etc. The same by website – http://www.aaa.de. Is there a way to check this.

    By the way … is there a chance to validate a upload field? validate the size and file format?

    Thank you Skruse

  • 20 Aug 2010 | Vishal Jaiswal says:

    you can user the radio or check box by the help of js function
    // Check term and conditions
    function termcond(args){
    if(document.getElementById(‘term’).checked==true){
    return {valid:true}
    }
    else{
    return {valid:false, message:’Choose terms and conditions.’}
    }
    }

    $(‘#term’).valid8({
    jsFunctions:[
    { 'function': termcond, 'values': function(){
    return {termchk: $('#term').val()}
    }}
    ]
    });

    html:

Make a comment