I have a simple form with phone inputs and some email inputs, however I cannot get rid of the default browser warning messages that come up when I click the submit button.
My CodePen
I've tried to implement event.preventDefault(); however it doesn't seem to work in my case.
$('#profile-info-form').unbind('submit').bind("submit", function(event) {
event.preventDefault();
console.log('save button clicked');
});
Example of the input fields I create on the fly:
var myphone = "<li><label>Cell Phone:</label></li><li><input type='tel' pattern='[0-9]{10}' class='added_mobilephone' name='mobilephone' value='' autocomplete='off' maxlength='20' /></li>";
How would you handle this problem?
If you want to disable client side validation for a form add a novalidate attribute to the form element. Fx:
<form method="post" action="" id="profile-info-form" novalidate>
// Your script Here
</form>
See http://www.w3.org/TR/html5/forms.html#attr-fs-novalidate
Remove the pattern attribute? Just using the tel type should still get you the keypad interface on mobile and without pattern the native validation/formatting should not run.
Related
Set error message when user forgets to upload image. i have not found anything most of the errors are uploading errors i want one that lets the user know that they forgot to upload image also i don't want to let the user go tho the next page until the image is uploaded. i have tried using my old code for forgot first and last name but that doesn't seem to work. that is just an example to show you what i use for errors please help
function formValidator() {
var names = document.getElementById('names');
if (isAlphanumeric(names, "Please enter first and last name")) {
<input type="file" name="file3" id="file3" />
I think you're over-engineering a bit here. You can actually rely on attributes of input in HTML5 that can validate or invalidate form submission for you. For example, denoting an input as required and using formvalidate can trigger this automatically.
<form action="" method="post" id="myform">
<input type="file" name="file3" id="file3" required formvalidate>
<input type="submit" novalidate>
</form>
The browser will insure the input is supplied before allowing the submission. You can also hook into the form's onsubmit handler via javascript if you need to do further validation...
var myform = document.getElementById('myform');
myform.onsubmit = function(e) { /* do some validation on event here */ };
I have a simple form, where I have a form element with one input type and button.
When I am click button, I am trying to get form data using
var fData = $("#test").serializeArray();
However for some reason, I am not able to get any values of form.
What could be the reason for this?
JSFiddle Demo
There are several issues. Firstly, the input has no name attribute, so it cannot be serialized. Secondly, you create the variable called fData, but log fdata - JS is case sensitive. Finally the form is being submit in the usual method when the button is clicked which means processing will be prevented after the first alert. To prevent this you can change the button to be a standard type, instead of a submit button:
<form id="test" method="POST">
<p>
<input id="val" name="foo" />
</p>
<button class="k-button" id="rset" type="button">submit</button>
</form>
Example fiddle
Or alternatively you can set the code to run under the submit event of the form, and use preventDefault to stop the standard form submission:
$("#test").submit(function (e) {
e.preventDefault();
alert('ok');
var fData = $(this).serializeArray();
alert('rData ' + fData);
});
Example fiddle
I have a html form with some input fields that need validation:
<input type="text" id="hrs-edit-oib" name="oib">
I also have two validators on it. So with the new forms it works great. But with the prepopulated forms, it doesn't work.
I believe it is because the validators are set to work on a "keyup" event:
createEmployeeForm.addValidation("hrs-edit-oib", Alfresco.forms.validation.mandatory, null, "keyup");
Is there a way to tell the validator to process the form rigth away, if it has been prepopulated on the server side?
Here's an example:
I load a page with markup:
"<input type="text" name="myid" value="preloaded" id="myid" />
And lets say that the value of "myid" needs to be longer then two chars (which is the case here). But there was no keyup and my Save button is disabled until I click into that field and press tab or something.
Thanks
I'm writing form and adding html5 validation attributes to its input like "required", "autofocus". I use Javascript to submit the form using document.myForm.submit() but it doesn't validate the form against the html5 validation attributes as they aren't there.
Any Suggestions?
It appears that triggering a click on the submit button does have the correct effect: http://jsfiddle.net/e6Hf7/.
document.myForm.submitButton.click();
and in case you don't have a submit button, add an invisible one like:
<input type="submit" style="display:none" name="submitButton">
The pimvdb's answer is based on a workaround to include a hidden submit button.
HTML5 provides javascript functions to achieve the same thing without a submit button. As Tigraine pointed out, Mozilla documents two validity checking methods for 'form' elements:
checkValidity() return true/false and doesn't show anything to the end user
reportValidity() return true/false and ALSO shows the validation messages to the end user (like the normal submit button click does)
<!DOCTYPE html>
<html>
<body>
<form name="testform" action="action_page.php">
E-mail: <input type="email" name="email" required><br/>
Report validity<br/>
Check validity<br/>
Submit
</form>
</body>
</html>
Why not simply call the validation manually before you do document.myForm.submit()
What validation framework do you use and what AJAX library?
In case you use jQuery here is the code to prevent the submit:
$('#myForm').submit(function(evt) {
if (! $('#myForm').validate()) {
evt.preventDefault();
}
});
And trigger the submit through:
$('#myForm').submit();
This would call the validation whenever submit is triggered.. And if the validation fails it prevents the submit from executing.
But I'd look at your validationframework as it usually should do this already
In case you don't use any JavaScript framework you may want to have a look at: element.checkValidity(); and how to invoke the HTML5 validation from JavaScript before even calling submit.
Interesting bug here that seems to be limited to IE and Webkit.
I have a basic form setup:
<div id="output">Form output is displayed here</div>
<form id="myForm" action="#" method="post">
<input type="text" name="username" id="usernameInput" />
<input type="submit" value="Submit" />
</form>
Now if I just submit the form through a normal page refresh, the next time I go to type text into the input field, I will get the browser's default auto-suggest dropdown (this is the intended behavior). However, if I highjack the form submission behavior in order to do an AJAX submit:
$('#myForm').submit(function () {
$('#output').text($('usernameInput').val());
return false;
});
Now when I submit the form, the output div updates, but the previous values that I input into the form aren't stored and no suggestions will be made when you type.
Does anyone have any creative solutions to this problem? Maybe an (gulp) iframe?
IE and WebKit only remember values that were submitted normally, and since you are submitting it through AJAX, those engines do not remember the values. Instead of an iframe, I would use a jQuery plugin for the autocomplete, like this one. Of course, with that solution, you will need to maintain a listing of what a user has typed in the past, which shouldn't be too hard.
test with these modifications in controlling submit:
$('#myForm').submit(function (e) {
e.stopPropagation();
$('#output').html($("#usernameInput").val() + "<br />");
});