0

検証エラーがあってもフォームは送信されます。検証エラーが発生したときに送信ボタンを無効にするにはどうすればよいですか? ここに.jsファイルがあります

,submitFu:function(){
_.validateFu(_.labels)                          
if(!_.form.has('.'+_.invalidCl).length)
    $.ajax({
        type: "POST",
        url:_.mailHandlerURL,
        data:{
            name:_.getValFromLabel($('.name',_.form)),
            email:_.getValFromLabel($('.email',_.form)),
            phone:_.getValFromLabel($('.phone',_.form)),
            //fax:_.getValFromLabel($('.fax',_.form)),
            //state:_.getValFromLabel($('.state',_.form)),
            message:_.getValFromLabel($('.message',_.form)),
            owner_email:_.ownerEmail,
            stripHTML:_.stripHTML
        },
        success: function(){
            _.showFu()
        }
    })          
},
showFu:function(){
_.success.slideDown(function(){
    setTimeout(function(){
        _.success.slideUp()
        _.form.trigger('reset')
    },_.successShow)
})
},

そして、ここにフォームがあります：

    <form id="contact-form" action="contactTq.php" method="post">
                    <div class="success"> Contact form submitted! <strong>We will be in touch soon.</strong></div>
                    <fieldset>
                        <label class="name">
                            <input type="text" name="name" value="Enter Your Name:" >
                            <span class="error">*This is not a valid name.</span>
                            <span class="empty">*This field is required.</span>
                            <span class="clear"></span>
                        </label>
                        <label class="email">
                            <input type="text" name="email" value="Enter Your E-mail:">
                            <span class="error">*This is not a valid email address.</span>
                            <span class="empty">*This field is required.</span>
                            <span class="clear"></span>
                        </label>
                        <label class="phone">
                            <input type="text" name="phone" value="Enter Your Phone (optional):">
                            <span class="error">*This is not a valid phone number.</span>
                            <span class="clear"></span>
                        </label>
                        <label class="message">
                            <textarea name="msg">Enter Your Message:</textarea>
                            <span class="error">*The message is too short.</span>
                            <span class="empty">*This field is required.</span>
                            <span class="clear"></span>
                        </label>
                        <div class="buttons"><strong><a class="button" data-type="reset">Reset<span></span></a></strong><strong><a class="button" data-type="submit" href="javascript:{}" onclick="document.getElementById('contact-form').submit();">Submit<span></span></a></strong></div>
                    </fieldset>
                </form>
4

3 に答える 3

0

onclick ハンドラーが次のように記述されているため、ボタンがクリックされるとすぐにフォームを送信しているように見えます。

onclick="document.getElementById('contact-form').submit();"

onclick ハンドラーを変更してsubmitFu関数を実行するだけで、うまくいくはずです。

于 2013-03-29T16:40:25.523 に答える
0

送信ボタンの onclick イベントを onclick="return submitFu()" に変更します

検証に失敗した場合は false を返し、フォームは送信されません。フォームのonsubmitイベントでも同じことができると思います。

于 2013-03-30T02:36:27.827 に答える
0

Knockout.js は、探していることを正確に行う素晴らしい仕事をします。既存の JavaScript を ViewModel に挿入し、ボタンにデータ バインドを配置して、すべてのフィールドが検証されるかどうかを有効にすることができます。ここでその方法を確認できます: http://knockoutjs.com/documentation/enable-binding.html

于 2013-03-29T16:29:52.013 に答える