jQuery or Javascript form validation on change

JavaScript
1

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 :frowning:

I’ve tried using this just for testing:


$("#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

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

Hey, I’ve been looking on both the jQuery Validation plugin, but also the JQuery Tools - What I can see in the [URL=“http://flowplayer.org/tools/validator/index.html”]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

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.

5

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:

$(".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!

6

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.

7

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

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?

9

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

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?

11

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

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.

13

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

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.

15

In the mean-time, this appears to be a valid solution from Add validation image for success/fail


.validate({
  success: function(label) {
     label.addClass('valid');
  }
});
16

Thank you a lot!

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

17

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 :confused: