im struggling to find out why tooltip/message bubble from html5 validation is not showed "on" checkbox when I press submit button but it is shown when I hover mouse over it? It seems to happen on Chrome/Edge. On Firefox works fine.
In code I used ngNativeValidate attribute:
<form ngNativeValidate autocomplete="off" (ngSubmit)="click_MoveToNextView()" #form="ngForm">
Input:
<input type="checkbox" required>
Submit:
<input type='submit'></input>
Code with similar issue ():
jsfiddle
Please anyone?
Related
I'm validating the form using a button click(not on form submit). The button is inside the form. Below is the code
HTML
<form id="form">
<input type="text" name="name" id="name" required />
<Button id="validate-button" onclick="check()">Validate</Button>
</form>
JavaScript
function check(e){
document.getElementById('form').reportValidity();
}
While this works as expected in chrome where the form is validated and I can see a popover on the name input field with message: Please fill in this field.
However in safari this is not the case. I can see that the invalid input gets in focus but the validation popover message is missing in safari browser.
JSFiddle: https://jsfiddle.net/cj6xynu1/
Note: Please check above jsfiddle link on safari
It turn out that the issue is because of the missing type attribute on the button. After adding type="button" the validation message started showing up in safari.
Working jsFiddle: https://jsfiddle.net/cj6xynu1/1/
Note: Check the above link in safari
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/
<class="searchform">
<input type="text" id="textbox" placeholder="Search..." checkbox_test(this.value);">
<input type="submit" id="button" class="classname" onClick="javascript:checkbox_test();">Search</a>
I have a custom search engine with checkbox options. I have a script called "checkbox_test" that will grab the text from the textbox and run the search query plus additional options selected with checkboxes.
The problem I have is that when I press 'Enter' nothing happens, I have tried many examples from stackoverflow and examples I found on the internet but it does not seem to work for me. Any ideas how to solve this problem?
Basically I want to run the javascript when the visitor presses enter (with and without focus)
You've got a markup error there. That's probably why nothing you try is happening.
Try the following:
<input type="text" id="textbox" placeholder="Search..." onkeypress="checkbox_test(this.value);">
HTML:
<body onkeypress="wasEnter(event)">....
Javascript:
function wasEnter(e) {
if (e.keyCode == 13) {
// here you can do your stuff
}
}
I'm using HTML code like this:
<form method="post" action="#">
<input type="text" name="inputFIeld" id="someVal" value="" />
<button id="submitFun" type="submit">Dodaj</button>
</form>
The only thing I do is preventDefault on submit button click and then I make an ajax call to the server.
It works just fine on all browsers except chrome. Autocomplete on chrome just doesn't work.
I find a link on chrome site :
Chrome : You should have to activate autocomplete :
https://support.google.com/chrome/answer/142893?hl=en
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.