0

これには非常に簡単な答えがあると確信していますが、今のところ理解できません。私はHTML5検証に不慣れで、入力要素や選択要素など、いくつかのフィールドで必要なバリデーターを使用しています。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>
4

2 に答える 2

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

これが役立つかどうかはわかりませんが、htmlは実験的なバージョンではありませんか？それで、あなたはあなたのブラウザとの互換性の問題を持っているかもしれませんか？いくつかの異なるブラウザを試しましたか？

また、スクリプトが続行されないように検証エラーがスローされた場合は、die / exitのようなものを設定する必要がありますか？私は投げると思います」; 構文です。

私は助けようとしているだけではよくわかりません：D

于 2012-12-11T17:45:48.363 に答える