I would like to setCustomValidity on an input immediately before the form is submitted. This seems like the logical approach:
document.querySelector('form').addEventListener('submit', function(e) {
var button = e.currentTarget.querySelector('input[type="radio"]');
button.setCustomValidity('You did it wrong.');
console.log(button.willValidate); // true
console.log(button.checkValidity()); // false
// Open Dev Tools to see output
debugger;
});
<form>
<label for="radio">
<input id="radio" type="radio">
Radio button
</label>
<br>
<input type="submit">
</form>
Despite setting a custom error, the form continues to submit. Is there some other event I need to handle, something that happens before the browser decides it's done dealing with validation?
I realize I could use the required attribute. The above approach may be better for when:
for whatever reason you can edit JavaScript but not the HTML
you just want to set a customized error message
Try to use reportValidity():
document.querySelector('form').addEventListener('submit', function(e) {
// prevent the default action first
e.preventDefault();
var button = e.currentTarget.querySelector('input[type="radio"]');
button.setCustomValidity('You did it wrong.');
button.reportValidity();
//console.log(button.willValidate); // true
//console.log(button.checkValidity()); // false
// Open Dev Tools to see output
//debugger;
});
<form>
<label for="radio">
<input id="radio" type="radio">
Radio button
</label>
<br>
<input type="submit">
</form>
Validity isn't checked in the submit event because, by design, submit is not fired if the form is invalid - the invalid event is fired instead. Therefore you have to manually stop the submit event and force re-validation (or at least reporting of the validation).
Related
I have a form with a submit button to send the form data to the next page. So far so good. But now there should be some javascript-code executed (for tracking reasons) when the user submits the form. So I tried to set an event-listener. Problem is: sometimes the code will execute and sometimes it will be ignored.
I set a timeout and figured out that all timeouts greater than 15ms won't execute the code and to browser is already on the form_test.html page.
//secTimeout = 15;
button = document.getElementById('submitbutton');
button.addEventListener("click", function() {
// setTimeout(function(){
// console.log('log after ' + secTimeout + 'ms');
// }, secTimeout);
// execute tracking tool
});
<form id="form1" action="form_test.html">
<input type="text" name="text1">
<input type="text" name="text2">
<input type="text" name="text3">
<input type="submit" id="submitbutton">
</form>
what would be a good proceeding to ensure to js-code will run every time?
The best way to add tracking functionnality is to handle the submission programmaticaly. So use a and get inspiration from this. By sending the form programmaticaly you can run any piece of code you want before sending.
A small example:
<form id="form1" action="form_test.html">
<input type="text" name="text1">
<input type="text" name="text2">
<input type="text" name="text3">
<button id="submitbutton">
</form>
button = document.getElementById('submitbutton');
button.addEventListener("click", function() {
// execute tracking tool
document.form1.submit();
});
The short answer is
you should receive an event parameter in your event-handling function
then you should prevent default on this event (because generally when
you press the submit button, it submits the form)
then you should do your tracking code
then you should submit the form manually by
calling submit method of the form
Steps to reproduce the issue:
Set an input of type email / phone
Set the input as required
Hit form submit on the wrong pattern for email
The HTML validation message should be now visible.
Keep entering text into the input box
On entering the text in the input box after the validation message has been kicked in, the validation message persists and gets displayed on every keystroke.
I even tried setting setCustomValidity("") on keyup event but that does not help either.
Here is an example fiddle.
Here is a gif of the problem:
You can see that until I add #gmail.com to the email input, it keeps showing the HTML validation.
Any help would be appreciated.
Source code for the same.
HTML
<form>
<p>
<label for="t2">What's your e-mail?</label>
<input id="email" type="email" id="t2" name="email" required>
</p>
<p>
<button>Submit</button>
</p>
</form>
JS
$("#email").on("keyup", function (e) {
if (e.target.value.lenth !== 0) {
e.target.setCustomValidity("");
}
});
When the user presses enter and the input validation fails, that input fires an invalid event. So, you can add an invalid handler to customize (and possibly prevent) the resulting behavior. The invalid event does not get triggered by further inputs of normal characters, but the invalid pop-up will keep appearing as long as the input remains invalid and focused. When the input is unfocused (blurred), the validation pop-up will disappear. It will re-appear only after the user re-focuses the input and presses enter when the input text is still invalid.
So, one possible solution is to add an invalid listener that keeps track of whether the error pop-up is showing or not. Then, add a keydown listener that checks if the pop-up is showing. If the pop-up is showing, blur and then focus the element, so as to make the pop-up disappear until the next time the user presses enter:
let errorShowing = false;
$("#email")
.on('invalid', (e) => {
errorShowing = true;
})
.on("keydown", function(e) {
if (!errorShowing) return;
setTimeout(() => {
this.blur();
this.focus();
});
errorShowing = false;
})
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form id="form">
<label for="t2">What's your e-mail?</label>
<input id="email" type="email" id="t2" name="email" required>
</form>
I have this markup:
<form action="http://acumbamail.com/signup/13565/" method="POST">
<input type="checkbox" id="privacidad-btn" > Acepto política de privacidad<br>
<input type="button" value="Enviar" id="submit_acumba">
</form>
I want that if the user clicks on the button without checkbox checked there is an alert that he must agree to the terms (check the checkbox). Any ideas on the best approach to this?
I'm starting doing this way but don't know how which way to go:
if (jQuery("#privacidad-btn").is(":checked")) {
}
One approach that i like with html5 is the form validation
just put required on the checkbox and when the try to submit it they will be alerted with a popover dialog in there own language (its a good highlighter in the form of what is wrong with it)
<input required type="checkbox" id="privacidad-btn">
You could do it the way tymeJV suggest with button clicked event $("#submit_acumba").click(...)
That way you would support more browsers. but: It would just only validate on a click of a button
But there is the form submit event as well.
$("form").submit(function(e) {
if ( ! jQuery("#privacidad-btn").is(":checked")) {
// Not checked abort the default submit
e.preventDefault();
}
});
The difference is that it has to do all the native form validation before -> if it is invalid it won't trigger a submit or call the function
with button.onclick it would avoid the native validation since it would run before the submit event
You need a handler for the button as well:
$("#submit_acumba").click(function(e) {
e.preventDefault();
if (jQuery("#privacidad-btn").is(":checked")) {
//submit!
}
})
Using this straight and simple HTML implementation, you can do this without any special scripting (JavaScript/jQuery):
<form>
<p><input type="checkbox" required name="terms"> I accept the <u>Terms and Conditions</u></p>
<p><input type="submit"></p>
</form>
Here's a JSFiddle link where you can play with this implementation: http://jsfiddle.net/zs9b167b/
I have a page with multiple small forms on it. Each form has one input field that has an onchange function which will submit it's form to a url that returns a no data status.
Things work fine, submitting form after form, until the user clicks on a small form that has ONLY a submit button in it. This click works, but abandons the change in the previous field resulting in its onchange not firing the click at the bottom of the changed function fails (still trying to understand the firebug trace).
What's going on? is there a fix for my structure?
UPDATE:
First I tried simply delaying the action of the submit, but no luck.
I have hidden the and added an <input button> to the chain of "events" so that the focus has a place to come to rest before the real submit tries to happen -- the code below has been updated. So the question now becomes:
Is this as simple as it can be?
Script:
$(function() {
$('input,select').change(changed);
});
function changed(){
...
$(this).parents('form').find(':submit').click();
}
function doSubmit(elt, id)
{
$(elt).focus();
setTimeout(function(){
$(id).click();
}, 400);
}
One of may small forms:
<form class="clean" method="POST" action="QuoteProApp.php">
<input type="submit" value="field" name="btn_update" style="display: none;">
<input type="hidden" value="000242" name="quote_id">
<input type="text" maxlength="15" size="3" value="" name="q[cost][4][1][unit]">
</form>
The offending click goes into this form:
<form class="clean" method="POST" action="QuoteProApp.php">
<input type="hidden" value="000242" name="quote_id">
<input type='button' name='btn_close' value='Close' onclick='doSubmit(this,"#CLOSE");'>
<input id='CLOSE' type='submit' name='btn_close' value='Close' style='display:none;'>
</form>
Might be totally irrelevant, but your selector for the change event includes your submit input too. Can you change it to:
$('input[type="text"],select').change(changed);
to see if anything changes?
The solution turned out to be to create a button tag, set the focus explicitly to a it, and then set a timeout to click the real, but hidden, submit input tag. This allows the change in focus to run the submit associated with it and then continue with the explicit submit of the page.
The question has been updated to show this solution.
<input type="text" onkeypress="if (event.keyCode==13){ func_name(this.value);}" id="userinput"/>
I have a textfield where i have called a function on hitting the ENTER key.The problem is that the page gets reloaded while it should not have been so as i am calling only a js function.Please tell me what am i doing wrong.
The form is being submitted by the pressing of enter. You can attach an onsubmit event to the form, and return false to prevent submission (and true to submit). YOu can use this feature to validate the data before submitting, or to intercept your keypress event.
Alternatively, as commented on below, you can use event.preventDefault() to prevent the pressing of enter triggering a submit.
Something like this...
<form action=".">
<input type="text" onkeypress="console.log('happy days'); event.preventDefault()">
</form>
I know this is an old message, but I solved it adding "return false":
<input type="text" onkeypress="if (event.keyCode==13){ func_name(this.value);return false;}" id="userinput"/>
Maybe it is usefull to other with a similar issue.