I am using HTML form validation and have discovered a strange issue within IE11. The problem does not appear in Chrome, Firefox, Opera or Edge.
Basically, IE11 does not appear to perform a form reset correctly. I would expect a form reset to clear all validation errors and reset the form values back to their initial values. On the next submit, I would expect the form to re-validate.
What appears to happen during a form reset is only values are reset - validation error states (or even a successful validation) seem to remain unless a user changes the field.
The only workaround I can see for my web app is to reload the page rather than perform a form reset. Any other ideas?
The workflow is as follows:
Using IE11, remove the text from a required input field.
Click Submit, get validation error.
Click Reset, input field value returns to initial value.
Click Submit, get validation error yet the field has been filled in using the initial value.
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="X-UA-Compatible" content="IE=edge">
</head>
<body>
<form id="theForm" name="theForm">
<input type="text" name="textBox" value="test" required>
<input type="submit">
<input type="reset">
</form>
</body>
</html>
I am able to produce the issue but unfortunately no any solution is available for this specific issue.
You can try to use work around like first setting the textbox value to empty and then reset the form using JS.
<!DOCTYPE html>
<html>
<head>
<script type="text/javascript">
function resetfrm()
{
document.getElementById("txt1").value='';
document.getElementById("theForm").reset();
alert("clear");
}
</script>
</head>
<body>
<form id="theForm" name="theForm">
<input type="text" name="textBox" id="txt1" value="test" required>
<input type="submit">
<input type="button" onclick="resetfrm()" value="Reset">
</form>
</body>
</html>
Related
I have a form and an input outside of the form. The input is linked to the form.
I have tested this on Chrome and it works but on IE it does not.
Is this a known bug? Is there a link to the bug? PS: I don't need a solution I just need a confirmation that only IE behaves like this and perhaps a page where the bug is described or maybe a page where it says that it is function as design.
UPDATE
The bug that I am referring is this: When you enter some text on this input and press enter key I would expect for the form to submit. (as state previously on chrome it works as expected while on IE it does not)
Here is a code: go to the second input and press enter: In Chrome/Firefox/Opera the message submit called is displayed while in IE/Edge it does not.
function submitForm(e) {
alert('Submit called');
e.stopPropagation();
e.preventDefault();
return false;
}
<!DOCTYPE html>
<html>
<head>
<title>Page Title</title>
</head>
<body>
<form onsubmit="submitForm()" id="bugForm">
<input type="text" name="name" />
<input id="submitButton" type="submit" value="submit" />
</form>
<hr>
<input type="text" name="another" id="another" form="bugForm" />
</body>
</html>
You did not posted your sample code, So we cannot accurately say what you are doing in your code and why it is not working in IE.
If we assume like you have any input tag outside your form and you want to submit a form by pressing enter key on that input control than it should not submit the form because it is not inside the form tag. In that way IE is working correctly and it should not consider as a bug.
If you have a requirement to do that than you can try to refer an example below will work with IE.
<!DOCTYPE html>
<html>
<head>
<title>Page Title</title>
</head>
<body>
<form action="something.php">
<input type="text" name="name" />
<input id="submitButton" type="submit" value="submit" />
</form>
<hr>
You can click this ->
<label for="submitButton">Submit</label><br>
Or You can click ->
<input type="submit" onclick="document.forms[0].submit();" />
</body>
</html>
For Reference, You can refer links below.
(1) Form not working in Internet Explorer
(2) Submit form using a button outside the tag
I found a page where indeed an input outside of a form is not supported (HTML5).
http://html5test.com/
I am developing a form in html5, I have put the required attribute and customized the tool tip. When I press the submit button the customized tooltip appears however when I hover over the field I see default message "please fill out this field" in addition to custom tooltip post submission attempt or only default message pre submission. I like either to translate the default message or suppress it. The behavior is unique to chrome. Any help will be much appreciated.
I have tried using the setCustomValidity() onmouseover event but in vain
Regards
Yasir Munir
<html>
<head>
<script>
function validator(input) {
input.setCustomValidity('my custom message');
}
</script>
</head>
<body>
<form>
<input type="text" required onmouseover="validator(this)" oninput="validator(this)" />
<input type="submit" />
</form>
</body>
</html>
I have a problem when trying to submit a form via a button defined in another form.
<!DOCTYPE html>
<html lang="en">
<head>
<title>Test submit</title>
</head>
<body>
<form id="dummyForm" name="dummyForm">
<button onclick="sendTheForm();">Submit other form</button>
</form>
<form id="formID" name="formName" action="viewpost.php" method="POST">
<input type="hidden" value="something" id="inputA1" name="inputA1" />
<input type="hidden" value="something" id="inputA2" name="inputA2" />
</form>
<script type="text/javascript">
function sendTheForm() {
document.forms['formName'].submit();
}
</script>
</body>
</html>
The only way to achieve that redirect as expected is changing the following line:
onclick="sendTheForm();return false;"
I do not understand that the form submission works this way. Could anyone explain?
Thank in advance!
You click the submit button
The JavaScript event handler fires
The other form starts to submit
The submit button performs its default action
The first form submits, cancelling the other form's submission process
I get the right answer from this post thanks to Quentin tips. Why submit trigger in the first place? Cause default type of a button it is a submit type, but different browsers use different default types. Check Button Reference.
Next line work as expected, without return false trick!
<button type="button" onclick="sendTheForm();">Submit other form</button>
I have been working with html + js + css recently and found a very strange issue in chrome and firefox.
I have a form with a few fields, but it does not submit on pressing enter. I was wondering what could be the reason. It is submitted properly if I remove all the fields and keep only one.
Is it really a chrome/firefox bug or am I dreaming?
Code 1: (works properly, form is submitted on enter)
<html>
<head>
<meta charset=utf-8 />
<title>JS Bin</title>
</head>
<body>
<form>
<input type="text" />
</form>
</body>
</html>
Code 2: (does not work, form is not submitted on enter)
<html>
<head>
<meta charset=utf-8 />
<title>JS Bin</title>
</head>
<body>
<form>
<input type="text" />
<input type="text" />
</form>
</body>
</html>
Demos:
1 field: http://jsbin.com/IFowenev/4/edit (works properly, form is submitted on enter)
2 fields: http://jsbin.com/IFowenev/3/edit (does not work, form is not submitted on enter)
When there is only one single-line text input field in a form, the
user agent should accept Enter in that field as a request to submit
the form.
Hypertext Markup Language - 2.0
For reliable results, I recommend using JavaScript to submit on enter.
Here's a quotation for jQuery's submit function...
Depending on the browser, the Enter key may only cause a form
submission if the form has exactly one text field, or only when there
is a submit button present. The interface should not rely on a
particular behavior for this key unless the issue is forced by
observing the keypress event for presses of the Enter key.
Now if you want to"auto-submit" the form you can only have one input text element or simply add a submit button to the form.
If the below code was opened in firefox 20.0.1 and type some value in the text box. once after typing the value hit the browser refresh button. the typed value getting shifted from one input elelment to another.
<html>
<head>
<script>
function searchPageLoader(){
document.getElementById('searchareaa').innerHTML='<label ></label>';
}
</script>
</head>
<body onload="searchPageLoader()">
<div id="searchareaa"></div>
<input type="text" id="pageCount" value="5"/>
<input type="text" id="startlimit" value="11"/>
<input type="text" id="endlimit" value="5"/>
</body>
</html>
It is happening only in firefox and and only if we do the innerhtml . What is the work around for this, as it is spoiling most of the application workflow.
If you surround the form controls (including the div with the new label) with <form></form> tags, this strange behavior disappears. See https://support.mozilla.org/questions/959372