Still able to submit form after setting field as mandatory

Question

Function User is suppose to be input field and click on the 'submit' button. All fields are mandatory. Hence, user will not be able to navigate to the next page if they do not input any fields.

Issue:

I have set each field to be "required", however, I was still able navigate myself to the next page. How is this possible and I couldn't find what I have actually done wrong

Code:

 <form style=" alignment-adjust: autofocus" class="container" action="Page5" method="POST">
            Name: <input type="text" name="name" required><br><br>
            Email: <input type="text" name="email" required><br><br>   
            <input type="image" src="image/Submit.png" alt="Submit" width="250px" height="50px" onClick = "Page5()">
        </form>

<script>
        function Page5() {
            $("#page4").hide();
            $("#page5").show();
        }
    </script>

You are most likely doing something with javascript. As you can see the code that you posted works perfectly: http://jsfiddle.net/fpjbo4au/ — joshhunt, Nov 11 '15 at 02:27
Are you using browser that support it? If you didn't forget the `<` character in front of form, then it should work. Or as suggested, it might be you onclick function. Check the link for supported browser. http://www.w3schools.com/tags/att_input_required.asp — Ppp, Nov 11 '15 at 02:30
@joshhunt I have updated code. I included a script that simply just hide the current page and show the next page. Does that explain why it overides the function of required?? — Luke, Nov 11 '15 at 02:36

Oss · Answer 1 · 2015-11-11T02:32:47.910

0

The required attribute is not supported in IE9 or earlier nor in Safari. Thus I recommend you create your own validations for these browsers. Otherwise you have a problem in your Page5() method. Maybe you are submitting your request using it and thus it skips the required attribute validation.

Read more at W3Schools

edited Nov 11 '15 at 02:32

answered Nov 11 '15 at 02:28

Oss

4,232
2
20
35

1

How would that change it? Image is just a graphical submit button: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/image – joshhunt Nov 11 '15 at 02:29
Seriously? First you provide a low quality answer and then you edit it with someone else's idea without any attribution? – joshhunt Nov 11 '15 at 02:50

score 0 · Accepted Answer · edited May 23 '17 at 12:23

The issue is that browsers only validate forms when they are submitted. Because you are not actually submitting the form but instead using javascript the browser will not show any error messages.

A possible solution is something like this:

function Page5() {
    var $myForm = $('#myForm');
    // Check to see if the form is valid
    if ($myForm[0].checkValidity()) {
        // If the form is valid, go to the next page.
        $("#page4").hide();
        $("#page5").show();
    } else {
        // If the form is invalid, submit it. The form won't actually submit;
        // this will just cause the browser to display the native HTML5 error messages.
        $myForm.find('input[type=image]').click()
    }
}

Source. Note that you will need to add id="myForm" or something similar to your form.

One final thing to remember is to never rely on javascript or browser validation as this is easily faked. It should only be used for user convenience and you should always double check the submission on the server.

Still able to submit form after setting field as mandatory

2 Answers2