1

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.

I have a form with two input text fields which are required. I have a div with nothing in it. I have 3 reset buttons (Reset1, Reset2 & Reset3).

Reset1 - when clicked, submits the form after changing the action and bypass all the HTML validation.

Reset2 - when clicked, adds a hidden element with the name and id as submit in the div and then submits the form after changing the action. This doesn't bypass the HTML validation.

Reset3 - when clicked, adds a hidden element with the name submit1 in the div and submits the form. This bypass all the HTML validation

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 "submit".

If I add any other hidden element with a different name than submit then it bypass all the HTML validation.

The code is as follows: JSFiddle - http://jsfiddle.net/sumitk1/pRY4u/

<!DOCTYPE html>
<html>
<head>
    <link rel="stylesheet" href="http://code.jquery.com/ui/1.10.3/themes/smoothness/jquery-ui.css" />
    <script src="http://code.jquery.com/jquery-1.9.1.js"></script>
    <script src="http://code.jquery.com/ui/1.10.3/jquery-ui.js"></script>
<script type="text/javascript">
    $(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('<input type="hidden" name="submit" id="submit" value="reset"/>');
            $("#myForm").attr("action", "test2.html").submit();
        });
        $("#reset3").button().click(function(){
            // The below 2 line always wait for validation check
            $("#hiddenDiv").append('<input type="hidden" name="submit1" id="submit1" value="reset"/>');
            $("#myForm").attr("action", "test3.html").submit();
        });

    });
</script>


</head>
<body>

<form id="myForm" name="myForm" action="some.html" method="post">

    <input id="textBox1" name="textBox1" type="text" required="required" title="text1"><br/>
    <input id="textBox2" name="textBox2" type="text" required="required" title="text2"><br/>

    <div id="hiddenDiv" name="hiddenDiv"></div>

    <input id="reset1" name="reset1" type="submit" value="Reset1">
    <input id="reset2" name="reset2" type="submit" value="Reset2">
    <input id="reset3" name="reset3" type="submit" value="Reset3">

</form>

</body>
</html>
TylerH
  • 20,799
  • 66
  • 75
  • 101
Sumitk
  • 1,485
  • 6
  • 19
  • 31
  • Hi @RoryMcCrossan, I just changed all of them to buttons and it is still working in the same way. I have updated my jsfiddle with buttons as well. – Sumitk Nov 20 '13 at 09:34
  • @RoryMcCrossan — That's completely incorrect. There is no limit to the number of submit buttons you can have. Only the one clicked will be a successful control in a regular form submission. – Quentin Feb 15 '23 at 20:53
  • I can't reproduce the problem. All three buttons in the linked JSFiddle demo trigger native form validation. – Quentin Feb 15 '23 at 20:55
  • @Quentin did I comment on this? It's from nearly 10 years ago so I can't recall – Rory McCrossan Feb 16 '23 at 09:38

0 Answers0