提交前,JQuery模式询问

时间:2017-05-25 13:08:01

标签: javascript jquery

我有表格,用户将在其中输入他的姓名(必填),dob(不是必需的),在提交表格之前,有一个确认表明他/她是否确定提交没有dob的表格。我正在使用一个模态,它将提交上面的表格。我试着在下面运行我的代码,但我看不出问题为什么不工作。当dob中没有值时,模态应该询问并说“没有dob可以继续吗?"如果用户单击“提交”按钮,则应提交上面的模式,该模式超出模态。我希望你们能帮助我。谢谢。

HTML

<form id="createexperience" class="intro-message" method="post" action="./createexperience.php" enctype="multipart/form-data">
   <div class="form-group label-floating is-empty">
       <input type="text" name="name" required data-msg-required="Please enter your name">  
   </div>
   <div class="form-group label-floating is-empty">
       <input type="text" id="namefield" name="dob">  
   </div>
   <div class="form-group margin18 padbtm30">
   <input type="submit" class="btn btn-primary" value="Submit" />
   </div>
</form>

<div id="portfoliomsgmodal" class="modal fade" tabindex="-1">
<div class="modal-dialog">
    <div class="modal-content">
        <div class="modal-header">
            <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
            <h3 class="modal-title">TIP</h3> </div>
        <div class="modal-body">
                <label>There are twice as much chances of you getting contacted by your customers if you upload something in your portfolio. Upload photos or video or audio links to your profile.</label>
        </div>
        <div class="modal-footer">
            <input type="submit" class="btn btn-warning" data-dismiss="modal" value="Now">
            <input type="submit" id="submitlater" class="btn btn-primary nomargin" value="Later">
        </div>
    </div>
</div>
</div>

Jquery的

$(document).bind("click", function (e) {
    $("#createexperience").validate({
        rules: {
            "language[]": {
                required: !0
            }
        }
        , messages: {}
        , submitHandler: function () {
            return !1
        }
        , ignore: ".ignore"
        , errorElement: "label"
        , errorClass: "has-error"
        , submitHandler: function (e) {
            if ($.trim($('#namefield').val()) == '') {
                if (jQuery('#submitlater').data('clicked')) {
                    $('#createexperience').submit();
                    e.submit();
                }
                else {
                    $('#portfoliomsgmodal').modal('show');
                    return false;
                }
            }
            else {
                e.submit();
            }
        }
        , highlight: function (e) {
            $(e).closest(".form-group").removeClass("success").addClass("has-error")
        }
    })
})

1 个答案:

答案 0 :(得分:2)

您的submitHandler功能错误。试试这段代码希望它有效。

$(document).bind("click", function (e) {
    $("#createexperience").validate({
        rules: {
            "language[]": {
                required: !0
            }
        }
        , messages: {}
        , submitHandler: function () {
            return !1
        }
        , ignore: ".ignore"
        , errorElement: "label"
        , errorClass: "has-error"
        , submitHandler: function (e) {
            if ($.trim($('#namefield').val()) == '') {
               $('#portfoliomsgmodal').modal('show');
               $('#submitlater').click(function () {
                  e.submit();
               });
           } else {
             e.submit();
           }
        }
        , highlight: function (e) {
            $(e).closest(".form-group").removeClass("success").addClass("has-error")
        }
    })
});