Databases
StackOverflow2013
Postsdbo
POjquery form submit skips html5 validation when hidden element named submit is added
Body
 

Note that there are some explanatory texts on larger screens.

plurals
  1. POjquery form submit skips html5 validation when hidden element named submit is added
    text
    copied!<p>I recently started playing with jQuery and ran into a scenario which I couldn't understand. I am fairly new to front end programming and still learning.</p> <p>I have a form with two input text fields which are required.<br> I have a div with nothing in it.<br> I have 3 reset buttons (Reset1, Reset2 &amp; Reset3).<br></p> <p>Reset1 - when clicked, submits the form after changing the action and bypass all the html validation.<br> Reset2 - when clicked, adds a hidden element with the name and id as <strong>submit</strong> in the div and then submits the form after changing the action. This doesn't bypass the html validation.<br> Reset3 - when clicked, adds a hidden element with the name <strong>submit1</strong> in the div and submits the form. This bypass all the html validation</p> <p>So I am not able to find why the html validation doesn't get bypassed when I try to add a hidden element with name and id as <strong>"submit"</strong>.</p> <p>If I add any other hidden element with a different name than submit then it bypass all the html validation.</p> <p>The code is as follows: JsFiddle - <a href="http://jsfiddle.net/sumitk1/pRY4u/" rel="nofollow">http://jsfiddle.net/sumitk1/pRY4u/</a></p> <pre><code>&lt;!DOCTYPE html&gt; &lt;html&gt; &lt;head&gt; &lt;link rel="stylesheet" href="http://code.jquery.com/ui/1.10.3/themes/smoothness/jquery-ui.css" /&gt; &lt;script src="http://code.jquery.com/jquery-1.9.1.js"&gt;&lt;/script&gt; &lt;script src="http://code.jquery.com/ui/1.10.3/jquery-ui.js"&gt;&lt;/script&gt; &lt;script type="text/javascript"&gt; $(document).ready(function(){ $('#reset1').button().click(function(){ // The below line submits the form without validation check $("#myForm").attr("action", "test1.html").submit(); }); $("#reset2").button().click(function(){ // The below 2 line always wait for validation check $("#hiddenDiv").append('&lt;input type="hidden" name="submit" id="submit" value="reset"/&gt;'); $("#myForm").attr("action", "test2.html").submit(); }); $("#reset3").button().click(function(){ // The below 2 line always wait for validation check $("#hiddenDiv").append('&lt;input type="hidden" name="submit1" id="submit1" value="reset"/&gt;'); $("#myForm").attr("action", "test3.html").submit(); }); }); &lt;/script&gt; &lt;/head&gt; &lt;body&gt; &lt;form id="myForm" name="myForm" action="some.html" method="post"&gt; &lt;input id="textBox1" name="textBox1" type="text" required="required" title="text1"&gt;&lt;br/&gt; &lt;input id="textBox2" name="textBox2" type="text" required="required" title="text2"&gt;&lt;br/&gt; &lt;div id="hiddenDiv" name="hiddenDiv"&gt;&lt;/div&gt; &lt;input id="reset1" name="reset1" type="submit" value="Reset1"&gt; &lt;input id="reset2" name="reset2" type="submit" value="Reset2"&gt; &lt;input id="reset3" name="reset3" type="submit" value="Reset3"&gt; &lt;/form&gt; &lt;/body&gt; &lt;/html&gt; </code></pre>
 

Querying!

 
Guidance
An individual column

Larger individual text columns get their own page to allow for proper reading.

SQuiL has stopped working due to an internal error.

If you are curious you may find further information in the browser console, which is accessible through the devtools (F12).

Reload