Input validaton with a function call jquery - javascript

I am trying to find the correct jquery plugin to validate a few input elements on my page. I would like to be able to have the validation happen on the fly and if any of the validations fail it will call a function. I have been researching this and I can not find a good example on how to do this or what plugin to use. I ultimately just want to validate a few input fields such as first name, last name, email, phone, etc. and if any of them fail the Submit button is disabled. Any ideas?

Try this one -- looks like it does what you want.
http://bassistance.de/jquery-plugins/jquery-plugin-validation/

Related

Custom validation in MDL

I'm currently making an HTML registration form that completely relies on AJAX and JavaScript (no libraries please), also using MDL.
My problem is that I want to validate the email and the username real-time, i. e. onBlur the AJAX makes a call to the server asking whether the email and the username are taken. If yes, I want to mark the inputs as invalid and display a textfield error saying what happened. This, however, doesn't seem to be possible using MDL.
What I tried: use customValidity(), but MDL only realises the change after a keydown, so this doesn't work. I also tired assigning the input divs an is-invalid class, but same problem as before.
What I need: override the validity from JS and trigger MDL into realising that the validity changed and should update elements accordingly.
Is this possible?

Constantly refresh Javascript values of text fields

I'm working on an input form, and I have a Javascript function that gets all of the field values when you press a button. I am looking for a way to automatically refresh the Javascript values (so I can, for example, check if a username is too short on a registration page as they type, and also check if the username is available). Would this be possible?
To clarify, I have an HTML input field (for text), and as the user is typing a result, automatically update.
I'm also open to using PHP or jQuery if it's not possible using solely Javascript, but I'd prefer Javascript if it's possible. Also, sorry if this is a rather basic question, but I've searched and searched and can't find anything on it. I know it's possible because I've seen it on websites (in fact, even on this one, as you type a question, it updates the preview at the bottom).
You should use JQuery Validation Plugin to reduce the heavy checking.
Check this one out at http://jquery.bassistance.de/validate/demo/
No jQuery needed
<input type="text" onKeyUp="validate(this.value);">
function validate(value){
//validate code on value
}
You should monitor onkeyup event
<input type="text" id="test">
$('#test').on('keyup', function() { //this function is triggered every time the user releases a key while typing inside the text field above
//do whatever you want here
});

Most effective way to make jquery field validation

what is the most effective way to make a jquery field validation? For example if field name is empty, it will add empty checkmark next to field? I understand, that PHP validation is needed, and I have it, so no worries about that.
You can try JQuery inline validation.
From here you can try out many examples
http://www.position-absolute.com/articles/jquery-form-validator-because-form-validation-is-a-mess/

How do I determine whether data on a form has been input by the user or the browser?

I have a checkout form that will display a pop-up survey to ask why they haven't started filling out the form after 5 seconds. However, I need to be able to check whether the user has actually entered data as opposed to data entered by the browser's auto-fill feature (any pre-populated data set in the markup I specifically ignore in the javascript or jQuery).
Right now my solution is to have the setTimeout run a function which checks a variable (true or false) that is set to false on a jQuery .focus or .change event on the input types (input, select, textarea). However, since the javascript may load after the user is able to use the form elements, I have to check whether the user has entered data before the survey pops up.
Is it possible to differentiate between user-inputted data and browser-inputted data if the javascript loads after the user has done anything to the form fields?
If you really want to tell browser not to autofill it at all, you could use autocomplete attribute, but this is unfortunately an invalid attribute and thus will not validate. If you really need your HTML to validate, you can use jQuery to do just that for you:
$(your_form_selector).attr('autocomplete', 'off');
More discussion about autocomplete here
What about .keyup event for form?
var isFilledByUser = false;
$("#input").keyup(function(){
var isFilledByUser = true;
});
ok... this was mildly entertaining, but I definitely agree... this feature would be so annoying XD
http://jsfiddle.net/NTvrN/1/
but there you go... now type, foo!

jQuery validation of controls

I am looking at validation of some text boxes for things like required,
minlength, max length, email etc... I am able to get examples that work fine on submit button on page. I want to do this validation on a button click which will only raise a Ajax request and not submit of page.
On the Internet all the samples found was with a submit button. Is there an
easy way to change this code a little bit to make it work for non submit button click or any
new jQuery or Java plugin to do the same?
I am using the jquery.validation.js for now. This works with submit buttons.
Any kind of help with suggestion or help is appreciated.
The jQuery validator plugin already handles this. Just tweak some of the options in the validate method.
As quoted in the documentation for the onfocusout option:
Validate elements (except checkboxes/radio buttons) on blur. If nothing is entered, all rules are skipped, except when the field was already marked as invalid.
Code Example:
$("#form").validate({
onfocusout: false
});
That's just one of a few dozen options you can configure. You can see the full list of options for the validate method here:
http://docs.jquery.com/Plugins/Validation/validate#options

Categories

Resources