Why does my form post even when HTML5 required attribute is not met

Question

I am sure there is a very easy answer to this but right now I can't figure it out. I am new to HTML 5 validation and using the required validator on several fields, including an input element and select elements. All is fine with the select elements, but when I don't enter data into the input element I get the validation popup error message but the form goes ahead and posts anyway. Here is my code :

    <script type="text/javascript" src="@Url.Content("~/Scripts/knockout-2.1.0.js")"></script>

@using (Html.BeginForm())
{
    <table id="addFixture" border="0" cellpadding="3">
        <tr>
            <td>Season</td><td><input type="text" id="txtSeason" required /></td>
        </tr>
        <tr>
            <td>Week</td><td><select id="ddlWeek" required /></td>
        </tr>
        <tr>
            <td>Away Team</td><td><select id="ddlAwayTeam" required /></td>
        </tr>
        <tr>
            <td>Score</td><td><input type="text" id="txtAwayTeamScore" /></td>
        </tr>
        <tr>
            <td>Home Team</td><td><select id="ddlHomeTeam" required /></td>
        </tr>
        <tr>
            <td>Score</td><td><input type="text" id="txtHomeTeamScore" /></td>
        </tr>
    </table>

    <input type="submit" onclick=" addFixture() "/>
}

<script type="text/javascript">

    $(document).ready(function () {
        populateTeams();
        populateWeeks();
    });

    function populateTeams() {

        $.ajax({
            type: 'GET',
            url: '/api/team/',
            contentType: "application/json; charset=utf-8",
            dataType: 'json',
            success: function (results) {
                var $subType = $("#ddlAwayTeam");
                $subType.empty();
                $subType.append($('<option></option>').attr("value", "").text("--Please select--"));
                $.each(results, function () {
                    $subType.append($('<option></option>').attr("value", this.TeamId).text(this.TeamName));
                });

                var $subType = $("#ddlHomeTeam");
                $subType.empty();
                $subType.append($('<option></option>').attr("value", "").text("--Please select--"));
                $.each(results, function () {
                    $subType.append($('<option></option>').attr("value", this.TeamId).text(this.TeamName));
                });
            }
        });
    }

    function populateWeeks() {

        var numbers = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15, 16];

        $('<option/>').val("").html("--Please select--").appendTo('#ddlWeek');

        for (i = 0; i < numbers.length; i++) {
            $('<option/>').val(numbers[i]).html(numbers[i]).appendTo('#ddlWeek');
        }
    }

    function addFixture() {

        var season = $("#txtSeason").val();
        var week = $("#ddlWeek").val();
        var awayTeam = $("#ddlAwayTeam").find(":selected").text();
        var awayTeamScore = $("#txtAwayTeamScore").val();
        var homeTeam = $("#ddlHomeTeam").find(":selected").text();
        var homeTeamScore = $("#txtHomeTeamScore").val();

        $.ajax({
            type: 'POST',
            url: '/api/fixture/',
            data: JSON.stringify({ Season: season, Week: week, AwayTeamName: awayTeam, HomeTeamName: homeTeam, AwayTeamScore: awayTeamScore, HomeTeamScore: homeTeamScore }),
            contentType: "application/json; charset=utf-8",
            dataType: 'json',
            success: function(results) {
                alert('Fixture Added !');
            }
        });
    }

</script>

Could you post a more minimal example using jsfiddle?

PhonicUK
– PhonicUK

2012-12-11 17:48:09 +00:00
Commented Dec 11, 2012 at 17:48 — PhonicUK
– PhonicUK, Commented Dec 11, 2012 at 17:48

RobMasters · Accepted Answer · 2012-12-11 17:51:24Z

1

It's probably because you're manually creating a POST request when the submit button is clicked (i.e. not submitted). Using inline Javascript is bad practice anyway. Try removing the inline onclick and doing this instead:

var ele = document.getElementById('id-of-the-form');
if(ele.addEventListener){
    ele.addEventListener("submit", addFixture, false);  //Cool modern browser!
else if (ele.attachEvent){
    ele.attachEvent('onsubmit', addFixture);          //The evil IE needs extra
}

Or, if you're using jQuery, this is even easier:

$('#id-of-the-form').submit(function(e) {
    e.preventDefault();
    addFixture(); // Or you could simply put the addFixture contents here
});

answered Dec 11, 2012 at 17:51

RobMasters

4,1462 gold badges29 silver badges34 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

user1869615 · Accepted Answer · 2012-12-11 17:45:48Z

0

I dont know if this helps, but is the html not an experimental version? So u might have compatibility isues with your browser? Did you try a few different browsers?

And maybe you should set something like die/exit if the validation error get thrown so that the script does not continue? I think Throw''; is the syntax.

I dont know much just trying to help :D

answered Dec 11, 2012 at 17:45

user1869615

Collectives™ on Stack Overflow

Why does my form post even when HTML5 required attribute is not met

2 Answers 2

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related