Question

我确信有一个非常简单的答案，但现在我无法理解。我是HTML 5验证的新手，并在几个字段上使用所需的验证器，包括input元素和select元素。使用select元素一切都很好，但是当我没有在输入元素中输入数据时，我会收到验证弹出错误消息，但表格仍在继续并发布。这是我的代码：

    <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>

Answer 1

这可能是因为当提交按钮为clicked（即不是submitted）时，您手动创建了POST请求。无论如何，使用内联Javascript是不好的做法。请尝试删除内联onclick，然后执行此操作：

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
}

或者，如果您使用的是jQuery，则更容易：

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

Answer 2

我不知道这是否有帮助，但html不是实验版本？所以你可能与你的浏览器有兼容性问题？您尝试过几种不同的浏览器吗？

也许你应该设置像die / exit这样的东西，如果抛出验证错误，那么脚本不会继续？我觉得扔'';是语法。

我不太了解只是想帮忙：D

为什么即使不符合HTML5必需属性，我的表单也会发布

2 个答案: