在表单验证中显示模态答案

【问题标题】：Show Modal on form validation在表单验证中显示模态
【发布时间】：2015-12-14 01:21:15
【问题描述】：

我是 javascript 和 boostrap 的初学者。我想要的是： 1. 用户点击提交按钮。 2. 使用 entry_check() 验证表单。 3.关于表单验证成功。使用用户输入值打开引导模式。 MODAL 将充当确认框，其中包含要提交或取消的用户值 4. 点击 MODAL POST 表单中的提交按钮。

表格

<form role="form" id="ps_entry" name="ps_entry" method="post" action="/user/accounts/ps/add/">
Date<input name="date" id="date" class="form-control" autocomplete="off" />

Rate<input name="rate" id="rate" class="form-control" autocomplete="off" onkeypress="AmtCalc()" />

Box<input name="box" id="box" class="form-control" autocomplete="off" />

Amount<input name="amount" id="amount" class="form-control" readonly />

Payment Date<input name="pdate" id="pdate" class="form-control" autocomplete="off" />

Remarks<textarea name="remarks" id="remarks" class="form-control" autocomplete="off"></textarea></td>

entry_check()

function entry_check(){

    var x = document.forms["ps_entry"]["date"].value;
    if (x == null || x == "") {
        alert("Please select  Date");
        return false;
    }


    var x = document.forms["ps_entry"]["rate"].value;
    if (x == null || x == "") {
        alert("Rate cannot be empty");
        return false;
    }

    var x = document.forms["ps_entry"]["box"].value;
    if (x == null || x == "") {
        alert("No. of Box cannot be empty");
        return false;
    }

}

按钮

<input type="button" name="submitBtn" value="Submit" id="submitBtn" onclick="submitForm()"  class="btn btn-default" />

点击提交

$(document).ready(function(){
    $('#submitBtn').click(function(){
    var success = entry_check();
    if (success) {
        $('#confirm-submit').modal('show');


        $('#dat').html($('#date').val());
        $('#rat').html($('#rate').val());
        $('#bo').html($('#box').val());
        $('#amoun').html($('#amount').val());
        $('#pdat').html($('#pdate').val());
        $('#remark').html($('#remarks').val());

        $('#submit').click(function(){
        /* when the submit button in the modal is clicked, submit the form */
            alert('submitting');
        $('#ps_entry').submit();
    });
    }
    });
});

【问题讨论】：

是的，但是这个问题有一个表单验证部分。在显示模式之前，我需要使用 javascript 验证表单。
@Shehary 我已添加表单
所以唯一的问题是表单验证？
表单得到验证但不显示模式
来吧，坚持一件事，上面你说I need to validate the form using javascript before showing the modal.，现在你说它得到验证但模式没有显示

标签： javascript jquery html forms twitter-bootstrap

【解决方案1】：

如果您想要一种更简洁的方式来验证您的表单，您可能需要查看 jquery validate 插件。

在提交时执行以下操作...

var formValidationRules = {
    rules: {
        date: {
            required: true
        },
        rate: {
            required: true
        },
        box: {
            required: true
        },
        (... more form fields)

    }
};

$("#ps_entry").submit(function(){
    $(this).validate(formValidationRules);
});

jQuery Validate

【讨论】：