0

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

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

2 回答 2

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
});
于 2012-12-11T17:51:24.843 回答
0

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

如果验证错误被抛出，也许你应该设置像 die/exit 这样的东西，这样脚本就不会继续？我认为投掷''; 是语法。

我不太了解，只是想提供帮助：D

于 2012-12-11T17:45:48.363 回答