web-dev-qa-db-ja.com

MVC 3およびJQueryでの手動フォーム検証

ユーザーが[GO]ボタンを選択したときにクライアント側でフォーム検証をトリガーできるようにしたいのですが。現在、[GO]ボタンを選択すると、完全なフォームは検証されません。たとえば、フォームをロードして、テキストボックスにフォーカスを与えずに[移動]ボタンを選択すると、何も検証されず、val.Valid（）がtrueを返します。テキストボックスに無効なデータを入力すると、その個々のアイテムに対して検証が実行されます。 「GO」ボタンを選択すると、val.Valid（）はfalseを返します。

だから私がやろうとしていることは、ユーザーがボタンやその他のイベントを選択したときに、すべてのフォーム検証をトリガーしたいということです。

私はMVC 3でこれをやっています

public class TestValidationModel
{
    [Required(ErrorMessage="UserName Is Required")]
    [RegularExpression(@"(\S)+", ErrorMessage = "White space is not allowed")] 
    [StringLength(12, MinimumLength = 3)] 
    public string UserName { get; set; }

    [Required(ErrorMessage="Password Is Required")]
    [StringLength(20, MinimumLength = 3)] 
    public string Password { get; set; }

    [Required(ErrorMessage="Email Address Is Required")]
    [Display(Name = "Email Address")]
    public string EmailAddress{ get; set; }

}

<script src="/BasicMvc3Example2/Scripts/jquery-1.4.4.js" type="text/javascript"></script>
<script src="/BasicMvc3Example2/Scripts/jquery-ui.js" type="text/javascript"></script>
<script src="/BasicMvc3Example2/Scripts/jquery.validate.js" type="text/javascript"></script>
<script src="/BasicMvc3Example2/Scripts/jquery.validate.unobtrusive.js" type="text/javascript"></script>

<script type="text/javascript">
    $(function () {
        $("#butValidateForm").click(function(){

            var val = $('#myForm').validate()
            alert(val.valid());
        })
    });
</script>

@using (Html.BeginForm("", "", FormMethod.Post, new {id = "myForm"}))
{
    <div>
       @Html.LabelFor(m => m.UserName)
       @Html.TextBoxFor(m => m.UserName)
       @Html.ValidationMessageFor(m => m.UserName)
    </div>

    <div>
       @Html.LabelFor(m => m.Password)
       @Html.TextBoxFor(m => m.Password)
       @Html.ValidationMessageFor(m => m.Password)
    </div>

    <div>
       @Html.LabelFor(m => m.EmailAddress)
       @Html.TextBoxFor(m => m.EmailAddress)
       @Html.ValidationMessageFor(m => m.EmailAddress)
    </div>

    <button id="butValidateForm">GO</button>
    <input type="submit" id="submitForm" value="Submit" />
}

更新

私は自分の問題の解決策を見つけたと思います。以下のshowErrorsを参照してください

   <script type="text/javascript">
        $(function () {
            $("#butValidateForm").click(function () {

                var val = $('#myForm').validate();
                val.showErrors();  //<-- Call showErrors
                alert(val.valid());
            })
        });
    </script>

JQueryフォームに関する投稿への次のリンクは私の問題には関係ありませんでしたが、探していたメソッド名を見つけることができました。 http://plugins.jquery.com/content/jqueryvalidate-showerrors-issue-form-wizard

誰かがより良い答えを持っている場合は、フィードバックを提供してください。

更新

以前のコードはFirefoxでは多少機能しますが、IEではまったく機能しません。私は次のことをしました、そしてそれは今Firefoxで動作しますがIDではまだ動作しません

    $(function () {
        $("#myForm").submit(function (e) {
            var val = $('#myForm').validate(); //<--added the semi-colon
            val.showErrors();
            alert(val.valid());


            e.preventDefault();
        });
    });


//            $("#butValidateForm").click(function () {
//                var val = $('#myForm').validate()
//                val.showErrors();
//                alert(val.valid());
//            })
    });

jQueryを使用してASP.NET MVCフォームの投稿をハイジャックする 正しい方向に向けてくれてありがとうしかし、まだ完璧ではありません

jqueryasp.net-mvc-3jquery-validate
14
Mike Barlow - BarDev

これが最善/最も効率的な方法であるかどうかはわかりませんが、自分の関数で各要素を個別に検証することで実現しています。

jQuery(document).ready(function () {

    $("#butValidateForm").button().click(function () { return IsMyFormValid(); });
    $('#myForm').validate();

}

function IsMyFormValid() {

    var isValid = false;

    isValid = $('#myForm').validate().element($('#UserName '));
    isValid = ($('#myForm').validate().element($('#Password '))) ? isValid : false;
    isValid = ($('#myForm').validate().element($('#EmailAddress'))) ? isValid : false;

    return isValid;
}

自動的に検証できるようにするのは素晴らしいことですが、私は常に、一般的な検証メソッドに引っ掛からない奇妙なビジネスロジックルールに遭遇するようです。この方法でこれを行うと、すべての検証を希望どおりに制御できますが、ほとんどの場合、組み込みの検証に依存しています。

10
user82646
<script type="text/javascript">
    $(function () {
        $("#butValidateForm").click(function (event) {

            var isValid = $('#myForm').valid();
            if(isValid)
            {
               //do something before submit the form
               $('#myForm').submit();
            }else{
               alert('validation failed'); 
            }
            event.preventDefault();
        })
    });
</script>
8
Adamy

あなたがまだこれを理解しているかどうかはわかりませんが、私はIE with $("#myForm").submitで同じことに遭遇しました。liveを使用してください：

$("#myForm").live('submit', function (e) {
    var val = $('#myForm').validate(); //<--added the semi-colon
    val.showErrors();
    alert(val.valid());


    e.preventDefault();
});
3
Martin

IEで機能しないのは、セミコロンがないためです。

var val = $('#myForm').validate()
0
John Farrell