I am working on a large legacy Asp.Net webforms project. I have a field that hits our server to check for uniqueness on validation. Everything in this process is working except that the important field will validate on keyup after changing focus and then refocusing on the field. The field is a simple html input. I have tried setting onkeyup to false among other events. I have tried using a custom onkeyup. No matter what I try, the keyup validation keeps coming back.
The user will focus on the field and enter their data. During the initial entry, validation does not fire until focus changes. Then, when the user focuses on the field again, validation fires on every key up. I have to prevent this behavior to cut down on network traffic. Otherwise, I'd call it good and move on. Any advice is much appreciated. The following code is simplified from the project, but is still giving me the behavior mentioned. Please let me know if I can clarify anything.
jQuery v3.4.1
jQuery Validation Plugin - v1.19.0
<form id="form1" runat="server">
<div style="padding: 100px;">
<div class="control-group">
<label for="claimNumber" class="control-label" style="width: 200px;">Claim #*</label>
<div class="controls" style="margin-left:20px">
<input type="text" class="form-control span3" id="claimNumber" name="claimNumber" maxlength="128"/>
<button style="margin-left: 10px">Validate</button>
</div>
</div>
</div>
</form>
<script>
var isUsed;
var form = $("#form1").show();
var form1ValidationRules = {
rules: {
claimNumber: {
uniqueClaim: true,
required: true
}
}
};
var validateForm = function () {
$('input,select,textarea', 'div.hide').not('input[type=radio]').each(function () {
$(this).val('');
});
return $("#form1").validate(form1ValidationRules).form();
};
$(document).ready(function () {
$.validator.addMethod(
"uniqueClaim",
function () {
console.log("validating");
return (isUsed == false)
},
"Claim number is already in use for your company."
);
$('form#form1').validate(form1ValidationRules);
$('#myform').validate({
onkeyup: false
});
});
</script>
$('form#form1').validate(form1ValidationRules);
$('#myform').validate({
onkeyup: false
});
Where is $myform? That would be a form with id="myform". You seem to have attached .validate() to a form that does not exist in this code. This call would be ignored.
If it's supposed to be the same form and you fix the #myform selector, it still will not work because you've called .validate() twice on same form. This second call would be ignored.
If you're using Unobtrusive Validation plugin as part of your ASP project, then you're calling .validate() three times on the same form. The .validate() call automatically created by the Unobtrusive plugin is going to get called first and the others will be ignored.
The jQuery Validate plugin uses .validate() to initialize the plugin on your form ONE time. If .validate() is called multiple times, all subsequent calls will be ignored.
ASP users that have Unobtrusive in place typically use the .setDefaults() method to over-ride any jQuery Validate settings created by Unobtrusive. Keep in mind this would over-ride jQuery Validate settings for all forms on the page.
I'm learning Javascript, and this basic redirect isn't doing anything.
The alert fires, but no version of 'page redirect' code I've tried seems to be working.
I've tried every version of location.href, document.location.href, window.location, etc etc....
I just want to switch urls when user input == '85.5'. But despite hours of trying, it just won't work.
What am I missing here?
Thanks!
I'm calling this function in a form element like so:
<form onsubmit="showInput()">
<input type="text" id="question" name="inputz">
</form>
function showInput(){
var InputNumber = document.getElementById("question").value;
if(InputNumber == '85.5'){
alert("You escaped"); //this works
alert(InputNumber); //this works
window.location.href ='/Survive_The_Swamp3.html'; //this does NOT work
return false;
}
else {
alert(InputNumber);
document.location.href ="https://i.redd.it/twrza9clfsh21.jpg"; //also doesn't work
return false;
}
}
This has nothing to do with window.location.href.
You don't have anything that submits the form. So the onsubmit handler is never called.
Forms are submitted when there's an <input type="submit"> which will be rendered as a button. Forms can also be submitted if there's a <button> inside the form. If neither of these exist then the form is never submitted unless you manually submit the form by calling the form's .submit() method in javascript.
For your code to trigger you need to wait for the <input> change event:
<input type="text" id="question" name="inputz" onchange="showInput()">
However there is a subtle issue with how onchange events work. They are triggered BEFORE the input gets the new value. As such when your user type "85.5" your event handler will see "85.". To get the current value you need to read it from the event object:
function showInput(event){
var InputNumber = event.target.value;
//...
The reason onchange works this way is to allow you to cancel the event thus preventing the <input> from getting the value. For example you can use this feature to prevent the user from entering something that is not a number.
I appreciate the feedback and information from everybody; however the only thing I was able to finally get to work was using the following configuration:
<form onsubmit="showInput(); return false"> //maybe return false here made the difference?
<input type="text" id="question" name="inputz" >
</form>
function showInput(){
var InputNumber = document.getElementById("question").value;
if(InputNumber == '85.5'){
alert("You escaped");
window.location.href='/Survive_The_Swamp3.html';
}
I have this form in my app and I will submit it via AJAX, but I want to use HTML for client-side validation. So I want to be able to force the form validation, perhaps via jQuery.
I want to trigger the validation without submitting the form. Is it possible?
To check whether a certain field is valid, use:
$('#myField')[0].checkValidity(); // returns true|false
To check if the form is valid, use:
$('#myForm')[0].checkValidity(); // returns true|false
Show html5 built-in error
if (! $('#myForm')[0].checkValidity()) {
$('#myForm')[0].reportValidity()
}
Keep in mind that, HTML5 validation is not supported in all browsers till now.
below code works for me,
$("#btn").click(function () {
if ($("#frm")[0].checkValidity())
alert('sucess');
else
//Validate Form
$("#frm")[0].reportValidity()
});
I found this solution to work for me.
Just call a javascript function like this:
action="javascript:myFunction();"
Then you have the html5 validation... really simple :-)
if $("form")[0].checkValidity()
$.ajax(
url: "url"
type: "post"
data: {
}
dataType: "json"
success: (data) ->
)
else
#important
$("form")[0].reportValidity()
from: html5 form validation
Here is a more general way that is a bit cleaner:
Create your form like this (can be a dummy form that does nothing):
<form class="validateDontSubmit">
...
Bind all forms that you dont really want to submit:
$(document).on('submit','.validateDontSubmit',function (e) {
//prevent the form from doing a submit
e.preventDefault();
return false;
})
Now lets say you have an <a> (within the <form>) that on click you want to validate the form:
$('#myLink').click(function(e){
//Leverage the HTML5 validation w/ ajax. Have to submit to get em. Wont actually submit cuz form
//has .validateDontSubmit class
var $theForm = $(this).closest('form');
//Some browsers don't implement checkValidity
if (( typeof($theForm[0].checkValidity) == "function" ) && !$theForm[0].checkValidity()) {
return;
}
//if you've gotten here - play on playa'
});
Few notes here:
I have noticed that you don't have to actually submit the form for validation to occur - the call to checkValidity() is enough (at least in chrome). If others could add comments with testing this theory on other browsers I'll update this answer.
The thing that triggers the validation does not have to be within the <form>. This was just a clean and flexible way to have a general purpose solution..
2022 vanilla JS solution
Pure JavaScript has all the functions you need for this. I know the question was about jQuery, but even the answers with jQuery use these functions, which are checkValidity() and reportValidity().
Test entire form
let form = document.getElementById('formId');
// Eventlistener can be another event and on another DOM object this is just an example
form.addEventListener('submit', function (event) {
// Only needed if event is submit, otherwise this line can be skipped
event.preventDefault();
// This is the important part, test if form is valid
if (form.checkValidity() === false){
// This is the magic function that displays the validation errors to the user
form.reportValidity();
return;
}
// Code if all fields are valid; continue form submit or make Ajax call.
})
Test specific field
checkValidity() and reportValidity() can not only be used on the form, but also on specific fields. No need to create a form or a dummy submit button if not needed.
// Get field of interest
let inputElement = document.querySelector("[name='" + inputName + "']");
// Check if the element is valid
if (inputElement.checkValidity() === false){
// If not, show the errors to the user
inputElement.reportValidity();
return;
}
// Nothing? Great, continue to the Ajax call or whatever
This has to be in a function called by an event listener to make sense, obviously.
May be late to the party but yet somehow I found this question while trying to solve similar problem. As no code from this page worked for me, meanwhile I came up with solution that works as specified.
Problem is when your <form> DOM contain single <button> element, once fired, that <button> will automatically sumbit form. If you play with AJAX, You probably need to prevent default action. But there is a catch: If you just do so, You will also prevent basic HTML5 validation. Therefore, it is good call to prevent defaults on that button only if the form is valid. Otherwise, HTML5 validation will protect You from submitting. jQuery checkValidity() will help with this:
jQuery:
$(document).ready(function() {
$('#buttonID').on('click', function(event) {
var isvalidate = $("#formID")[0].checkValidity();
if (isvalidate) {
event.preventDefault();
// HERE YOU CAN PUT YOUR AJAX CALL
}
});
});
Code described above will allow You to use basic HTML5 validation (with type and pattern matching) WITHOUT submitting form.
You speak of two different things "HTML5 validation" and validation of HTML form using javascript/jquery.
HTML5 "has" built-in options for validating a form. Such as using "required" attribute on a field, which could (based on browser implementation) fail form submission without using javascript/jquery.
With javascrip/jquery you can do something like this
$('your_form_id').bind('submit', function() {
// validate your form here
return (valid) ? true : false;
});
var $myForm = $('#myForm ');
if (!$myForm[0].checkValidity()) {
$('<input type="submit">').hide().appendTo($myForm).click().remove();
}
To check all the required fields of form without using submit button you can use below function.
You have to assign required attribute to the controls.
$("#btnSave").click(function () {
$(":input[required]").each(function () {
var myForm = $('#form1');
if (!$myForm[0].checkValidity())
{
$(myForm).submit();
}
});
});
You don't need jQuery to achieve this. In your form add:
onsubmit="return buttonSubmit(this)
or in JavaScript:
myform.setAttribute("onsubmit", "return buttonSubmit(this)");
In your buttonSubmit function (or whatver you call it), you can submit the form using AJAX. buttonSubmit will only get called if your form is validated in HTML5.
In case this helps anyone, here is my buttonSubmit function:
function buttonSubmit(e)
{
var ajax;
var formData = new FormData();
for (i = 0; i < e.elements.length; i++)
{
if (e.elements[i].type == "submit")
{
if (submitvalue == e.elements[i].value)
{
submit = e.elements[i];
submit.disabled = true;
}
}
else if (e.elements[i].type == "radio")
{
if (e.elements[i].checked)
formData.append(e.elements[i].name, e.elements[i].value);
}
else
formData.append(e.elements[i].name, e.elements[i].value);
}
formData.append("javascript", "javascript");
var action = e.action;
status = action.split('/').reverse()[0] + "-status";
ajax = new XMLHttpRequest();
ajax.addEventListener("load", manageLoad, false);
ajax.addEventListener("error", manageError, false);
ajax.open("POST", action);
ajax.send(formData);
return false;
}
Some of my forms contain multiple submit buttons, hence this line if (submitvalue == e.elements[i].value). I set the value of submitvalue using a click event.
This way works well for me:
Add onSubmit attribute in your form, don't forget to include return in the value.
<form id='frm-contact' method='POST' action='' onSubmit="return contact()">
Define the function.
function contact(params) {
$.ajax({
url: 'sendmail.php',
type: "POST",
dataType: "json",
timeout: 5000,
data: { params:params },
success: function (data, textStatus, jqXHR) {
// callback
},
error: function(jqXHR, textStatus, errorThrown) {
console.log(jqXHR.responseText);
}
});
return false;
}
I had a rather complex situation, where I needed multiple submit buttons to process different things. For example, Save and Delete.
The basis was that it was also unobtrusive, so I couldn't just make it a normal button. But also wanted to utilize html5 validation.
As well the submit event was overridden in case the user pressed enter to trigger the expected default submission; in this example save.
Here is the efforts of the processing of the form to still work with/without javascript and with html5 validation, with both submit and click events.
jsFiddle Demo - HTML5 validation with submit and click overrides
xHTML
<form>
<input type="text" required="required" value="" placeholder="test" />
<button type="submit" name="save">Save</button>
<button type="submit" name="delete">Delete</button>
</form>
JavaScript
//wrap our script in an annonymous function so that it can not be affected by other scripts and does not interact with other scripts
//ensures jQuery is the only thing declared as $
(function($){
var isValid = null;
var form = $('form');
var submitButton = form.find('button[type="submit"]')
var saveButton = submitButton.filter('[name="save"]');
var deleteButton = submitButton.filter('[name="delete"]');
//submit form behavior
var submitForm = function(e){
console.log('form submit');
//prevent form from submitting valid or invalid
e.preventDefault();
//user clicked and the form was not valid
if(isValid === false){
isValid = null;
return false;
}
//user pressed enter, process as if they clicked save instead
saveButton.trigger('click');
};
//override submit button behavior
var submitClick = function(e){
//Test form validitiy (HTML5) and store it in a global variable so both functions can use it
isValid = form[0].checkValidity();
if(false === isValid){
//allow the browser's default submit event behavior
return true;
}
//prevent default behavior
e.preventDefault();
//additional processing - $.ajax() etc
//.........
alert('Success');
};
//override submit form event
form.submit(submitForm);
//override submit button click event
submitButton.click(submitClick);
})(jQuery);
The caveat to using Javascript is that the browser's default onclick must propagate to the submit event MUST occur in order to display the error messages without supporting each browser in your code.
Otherwise if the click event is overridden with event.preventDefault() or return false it will never propagate to the browser's submit event.
The thing to point out is that in some browsers will not trigger the form submit when the user presses enter, instead it will trigger the first submit button in the form. Hence there is a console.log('form submit') to show that it does not trigger.
You can do it without submitting the form.
For example, if the form submit button with id "search" is in the other form . You can call click event on that submit button and call ev.preventDefault after that.
For my case I validate form B from Form A submission.
Like this
function validateFormB(ev){ // DOM Event object
//search is in Form A
$("#search").click();
ev.preventDefault();
//Form B validation from here on
}
$(document).on("submit", false);
submitButton.click(function(e) {
if (form.checkValidity()) {
form.submit();
}
});
$("#form").submit(function() { $("#saveButton").attr("disabled", true); });
not a best answer but works for me.
I know this has already been answered, but I have another possible solution.
If using jquery, you can do this.
First create a couple of extensions on jquery so you can resuse these as needed.
$.extend({
bypassDefaultSubmit: function (formName, newSubmitMethod) {
$('#'+formName).submit(function (event) {
newSubmitMethod();
event.preventDefault();
}
}
});
Next do something like this where you want to use it.
<script type="text/javascript">
/*if you want to validate the form on a submit call,
and you never want the form to be submitted via
a normal submit operation, or maybe you want handle it.
*/
$(function () {
$.bypassDefaultSubmit('form1', submit);
});
function submit(){
//do something, or nothing if you just want the validation
}
</script>
This worked form me to display the native HTML 5 error messages with form validation.
<button id="btnRegister" class="btn btn-success btn btn-lg" type="submit"> Register </button>
$('#RegForm').on('submit', function ()
{
if (this.checkValidity() == false)
{
// if form is not valid show native error messages
return false;
}
else
{
// if form is valid , show please wait message and disable the button
$("#btnRegister").html("<i class='fa fa-spinner fa-spin'></i> Please Wait...");
$(this).find(':submit').attr('disabled', 'disabled');
}
});
Note: RegForm is the form id.
Reference
Hope helps someone.
This is a pretty straight forward way of having HTML5 perform validation for any form, while still having modern JS control over the form. The only caveat is the submit button must be inside the <form>.
html
<form id="newUserForm" name="create">
Email<input type="email" name="username" id="username" size="25" required>
Phone<input type="tel" id="phone" name="phone" pattern="(?:\(\d{3}\)|\d{3})[- ]?\d{3}[- ]?\d{4}" size="12" maxlength="12" required>
<input id="submit" type="submit" value="Create Account" >
</form>
js
// bind in ready() function
jQuery( "#submit" ).click( newAcctSubmit );
function newAcctSubmit()
{
var myForm = jQuery( "#newUserForm" );
// html 5 is doing the form validation for us,
// so no need here (but backend will need to still for security)
if ( ! myForm[0].checkValidity() )
{
// bonk! failed to validate, so return true which lets the
// browser show native validation messages to the user
return true;
}
// post form with jQuery or whatever you want to do with a valid form!
var formVars = myForm.serialize();
etc...
}
I think the best approach
will be using jQuery Validation plugin which uses best practice for form validation and it also has good browser support. So you don't need to worry about browser compatibility issues.
And we can use jQuery validation valid() function which checks whether the selected form is valid or whether all selected elements are valid without submitting the form.
<form id="myform">
<input type="text" name="name" required>
<br>
<button type="button">Validate!</button>
</form>
<script>
var form = $( "#myform" );
form.validate();
$( "button" ).click(function() {
console.log( "Valid: " + form.valid() );
});
</script>
According to the question html5 validity should be validate able using jQuery at first and in most of the answer this is not happening and the reason for this is as following:
while validating using html5 form's default function
checkValidity();// returns true/false
we need to understand that jQuery returns object array, while selecting like this
$("#myForm")
therefore, you need to specify the first index to make checkValidity() function work
$('#myForm')[0].checkValidity()
here is the complete solution:
<button type="button" name="button" onclick="saveData()">Save</button>
function saveData()
{
if($('#myForm')[0].checkValidity()){
$.ajax({
type: "POST",
url: "save.php",
data: data,
success: function(resp){console.log("Response: "+resp);}
});
}
}
New on HTML5 there's an "invalid" event, to which you can add a listener:
document.addEventListener('invalid', function(e){
var element = $(e.target);
element.addClass("invalid");
element.parent().addClass("invalid");
}, true);
Please note, this event just works when submitting the form... If I style the input input:invalid { background: red }, the style is applied when the user starts typing and his input is not valid. Is that event only fired on submit? I tried adding the listener to the inputs themselves instead of the document and it didn't work.
I add a listener in order to apply a style to the input's parent... Now, when the user corrects it, it's valid again... I know there's not a "valid" event, so, how can I accomplish it?
Ok, so here's a fiddle --> http://jsfiddle.net/Osoascam/ceArQ/7/
The invalid listener seems to be only fired on submit... I just wanted to know whether there's a way to add a handler just like there is for focus. See that if you type a
Thanks in advance,
Óscar
You should use the :invalid pseudo selector and the input or the change event, to solve your problem.
$(document).bind('change', function(e){
if( $(e.target).is(':invalid') ){
$(e.target).parent().addClass('invalid');
} else {
$(e.target).parent().removeClass('invalid');
}
});
Here is a simple fiddle http://jsfiddle.net/trixta/YndYx/.
If you want to remove the error class as soon as possible you should add the error class on change and remove it on the input event (Note: input event is much better than here suggested keyup, simply because it also is triggered on paste etc., but it only works with input elements, not textarea.)
And here is a fiddle using a mixture of input and change event:
http://jsfiddle.net/trixta/jkQEX/
And if you want to have this cross browser you can simply use webshims lib to polyfill. Here is a x-browser example:
http://jsfiddle.net/trixta/RN8PA/
Since these classes are always added when a form is submit, remove the class prior validating:
$('#myForm').submit(function(){
$('.invalid', this).removeClass('invalid'); // Remove all invalid classes
$(this).removeClass('invalid'); // If the parent = form.
// Normal validation procedure.
});
Expected result:
User initiates submit
onsubmit is triggered > All invalid class names within the form are removed.
The invalid events are triggered, and the invalid classes are added when necessary
Update
Added an extra block to your fiddle, see updated fiddle: http://jsfiddle.net/ceArQ/10/. I have implemented the checkValidity() method and the validity.valid property. Now, the classes are automatically added when the input is invalid.
document.addEventListener('keyup', function(e){
var input = e.target;
if (!$.nodeName(input, 'input')) return;
input.checkValidity();
var element = $(input).parent();
if(input.validity.valid) {
element.removeClass('invalid');
element.parent().removeClass('invalid');
} else { //Remove the lines below if you don't want to automatically add
// classes when they're invalid.
element.addClass('invalid');
element.parent().removeClass('invalid');
}
});
On key-up, the validity of an input element is checked. If it's valid, the invalid class is removed from its parent.
You could bind your validation logic to the focus and blur events, or to be even more responsive, to the keyup event.
$('input').keyup(function() {
if(isValid(this)) {
$(this).removeClass('invalid').parent().removeClass('invalid');
$(this).addClass('valid').parent().addClass('invalid');
}
else {
$(this).removeClass('valid').parent().removeClass('valid');
$(this).addClass('invalid').parent().addClass('invalid');
}
});
Have you tried using :valid to give an indicator as to whether a field is valid. and having forms that are invalid just keep their default styling.
Then calling form.checkValidity() in the submit handler? (The browser should then tell the end-user which form element is not valid).
I have a form that detects if all the text-fields are valid on each keyup() and focus(); if they're all valid, it will enable the submit button for the user to press. However, if the user fills in one of the text inputs with a browsers autocomplete feature, it prevents the submit button from being enabled.
Is there a way to detect if any of the input has changed regardless of how it's been changed, using jQuery?
You could try using on input to detect text-based changes (except keys like ctrl and shift) in <input>'s.
For example:
$(input).on('input', function() {
console.log($(this).val());
});
The jQuery change event will only fire on blur. The keyup event will fire as you type. Neither fire on clicking an auto-completion option. I am also searching for a way to detect this, but I'm currently going with
$(selector).bind("change keyup",function(){
//Do something, probably with $(this).val()
});
But it doesn't quite solve the problem...
Myself I used
$(selector).on("change keyup blur input", function() {});
which did the trick in Chrome. input is what made it work for autocomplete.
My issue was detecting auto-fill (via a plugin like lastpass or 1password) as well as the issue described above.
The solution that worked for me was:
$(function(){
function validate(){
if($('#email').val() !== '' && $('#password').val() !== '')
$('#submit').prop('disabled', false);
else
$('#submit').prop('disabled', true);
}
// Validate after user input
$('#email, #password').on('keyup change', validate);
// Validate on mouse enter of body and login form
// to catch auto-fills from roboform/1password etc...
$('body, #loginform').on('mouseenter', validate);
// Validate onload incase of autocomplete/autofill
validate();
});
See demo in JSFiddle.
You could use the jQuery .change() function.
After the page initially loads, you can validate the entire form, just to check that it is in fact not filled in. After that you can use .change() to check if things have changed on the form, and if anything has changed, validate the form again.
$(document).ready(function() {
// validate form once, just to be sure (if valid, activate submit button)
});
...
<form>
<input class="target" type="text" value="Field 1" />
<select class="target">
<option value="option1" selected="selected">Option 1</option>
<option value="option2">Option 2</option>
</select>
</form>
<script type="text/javascript">
$('.target').change(function() {
alert('Something changed');
// Try validating form again (if valid, activate submit button)
});
</script>
Plan B
Another option is to always have the submit button clickable, but use .submit() to bind it to the form validator. Then if the form IS valid, carry on. If the form IS NOT valid use .preventDefault() to stop the submission of the form..... and you'd display a warning message too, indicating the missing fields.
The answer has been given in this question. It doesn't use jQuery, but it works for Autocomplete:
Use js onpropertychange event.
I have a decent solution after having the same problem. Set keyup as normal to our form fields, then mouseover to the surrounding div. So once you click the autocomplete option, you mouse will be over the top of the div:
$("#emailaddress").bind("keyup", function() {
displayFullSubcribeForm();
});
$(".center_left_box").bind("mouseover", function() {
displayFullSubcribeForm();
});
I wanted a very good user experience on a field where it would not be invalid (turn red in my case) as long as the user was reasonably active e.g. still filling out the field.
To do this for normal input, I was able to hook up to keyup with a debounce function, while blur is connected for immediate validation. While it appears that keyup is triggered by lastpass, since I have debounced it, there was a delay in validation. Thanks to #peter-ajtai I tried to add the change event and it indeed catches last pass and leaves the other niceties alone.
Coffeescript example:
#fieldExp
.keyup($.debounce(#_onExpChange, 3000))
.blur(#_onExpChange)
.change(#_onExpChange)
This worked well and lastpass form fill triggers immediate validation.
this is the ultimate solution, guaranteed to work
$(document).bind('mouseover', function(){
liveValidate();
});