即使javascript验证失败,MVC 4表单也会提交

时间:2014-06-15 17:57:37

标签: javascript asp.net-mvc asp.net-mvc-4

出于某种原因,即使java脚本验证失败,我的MVC4表单仍在提交。请在我看来查看下面的代码。我确实看到了javascript警报,但表单正在提交给服务器。

我缺少什么想法?

@model  DataAccess.Question

@using (Html.BeginForm("Index", "Question", new { QuestionId = Model.QuestionId }))
{
    <h2>Survey</h2>

    <fieldset>
        <legend>Please Choose</legend>
        <p>
            Question:
            @Model.QuestionId
        </p>
        <p>
            Description:
            @Model.Description
        </p>
        <ul style="list-style:none;">
            @foreach (var item in Model.Answers)
            {
                <li> @Html.RadioButton("ChoiceList", item.score) @item.AnswerDesc</li>

            }
        </ul>


        <input type="submit" value="Next" id="submitButton" onclick="getCheckedRadioButton()" />
    </fieldset>

}

<script type="text/javascript">
function getCheckedRadioButton() {
    var radio = document.getElementsByName("ChoiceList");
    for (var i = 0; i < radio.length; i++) {
        if (radio[i].checked) {
            return true;
        }
    }
    alert("Please select an option");      
    return false;
}
 </script>

我还检查了我的web.config并且以下键是真的

 <add key="ClientValidationEnabled" value="true" />
 <add key="UnobtrusiveJavaScriptEnabled" value="true" />

2 个答案:

答案 0 :(得分:1)

我遇到了类似的问题并解决了向表单元素添加属性的问题。试试这个

Html.BeginForm(new { onsubmit = "return getCheckedRadioButton();" })

使用您的其他属性

Html.BeginForm("Index", "Question", new { QuestionId = Model.QuestionId}, FormMethod.POST, new { onsubmit="return getCheckedRadioButton();"})

以这种方式,您的表单应使用此新属性

呈现

请参阅here了解文档

答案 1 :(得分:0)

getCheckedRadioButton()置于提交按钮不会触发表单验证。将getCheckedRadioButton()放在表单元素上。

@using (Html.BeginForm("Index", "Question", new { QuestionId = Model.QuestionId, onclick="getCheckedRadioButton()"  }))

$('form').submit(function(){
var radio = document.getElementsByName("ChoiceList");
    for (var i = 0; i < radio.length; i++) {
        if (radio[i].checked) {
            return true;
        }
    }
    alert("Please select an option");      
    return false;
});