Javascript 仅在验证检查和表单提交后显示模式

Javascript 仅在验证检查和表单提交后显示模式,javascript,jquery,bootstrap-modal,Javascript,Jquery,Bootstrap Modal,目前有相当多的例子,我还没能让它发挥作用。只有在我的表单通过简单验证并提交后,我才尝试加载我的模式。现在,当我单击submit时,它只加载模式,即使验证失败。 例如,下面的复选框是一个必填字段,如果我没有选中它并单击“提交验证错误加载”,但模态也是如此 <form method="post" action="" data-toggle="modal" onsubmit="return myModal(this)"> <input type="checkbox"

目前有相当多的例子,我还没能让它发挥作用。只有在我的表单通过简单验证并提交后,我才尝试加载我的模式。现在,当我单击submit时,它只加载模式,即使验证失败。

例如,下面的复选框是一个必填字段,如果我没有选中它并单击“提交验证错误加载”,但模态也是如此

<form method="post" action="" data-toggle="modal" onsubmit="return myModal(this)">
        <input type="checkbox" name="vehicle" value="Bike" required>I accept this<br>
        <button type="submit" value="Submit" class="btn btn-info btn-lg" data-toggle="modal" data-target="#myModal">Open Modal</button>
        <input type="submit" value="Submit" />
</form>
<form method="post" action="" data-toggle="modal" onsubmit="return myModal(this)">
    <input type="checkbox" name="vehicle" value="Bike" required>I accept this<br>

    <!-- button with onclick event that triggers the form validation. If the form is valid, triggers click of second button -->
    <button type="button" value="buttonValue" class="btn btn-info btn-lg" onclick="if(formIsValid() $('#triggerModal').click();)">button name</button>

    <!-- hidden submit button -->
    <button type="submit" id="triggerModal" hidden value="Submit" class="btn btn-info btn-lg" data-toggle="modal" data-target="#myModal"></button>  

</form>

我接受这一点
开放模态


&时代;
接近
我在网上找到了一个使用Jquery的示例,它工作得很好,但它不加载模式

<form method="post" action="" onsubmit="return muModal(this)">

    <input type="checkbox" name="vehicle" value="Accept" required>Accept<br>

    <input type="submit" value="Submit" />
</form>

接受


函数muModal(f)
{
var form=f,
模态=$(''){
'id':'alert',
“html”:”
})
.对话({
“模态”:正确,
“宽度”:800,
“高度”:“自动”,
“按钮”:{
“确定”:函数(){
$(此).dialog(“关闭”);
//做点什么,也许可以调用form.submit();
}
}
});
返回false;
}

请注意,表单仍然需要提交,我只想在提交过程中弹出模式。

据我所知,这就是您想要的

$('#myForm')。关于('submit',函数(e){
e、 preventDefault();//停止提交
如果($('#myCheck')。是(':checked')){
//选中复选框,然后显示模式
$('myModal').modal('show');
}
});

我接受这一点
&时代; 接近
我也遇到了同样的问题,下面是我所做的,看起来很有效。 创建两个按钮,而不是打开模式的“提交”类型的单个按钮:

第一个按钮:键入“按钮”,触发表单验证。如果表单已验证,则触发单击第二个按钮

第二个按钮:键入“提交”并隐藏。这是将打开模式的按钮

<form method="post" action="" data-toggle="modal" onsubmit="return myModal(this)">
        <input type="checkbox" name="vehicle" value="Bike" required>I accept this<br>
        <button type="submit" value="Submit" class="btn btn-info btn-lg" data-toggle="modal" data-target="#myModal">Open Modal</button>
        <input type="submit" value="Submit" />
</form>
<form method="post" action="" data-toggle="modal" onsubmit="return myModal(this)">
    <input type="checkbox" name="vehicle" value="Bike" required>I accept this<br>

    <!-- button with onclick event that triggers the form validation. If the form is valid, triggers click of second button -->
    <button type="button" value="buttonValue" class="btn btn-info btn-lg" onclick="if(formIsValid() $('#triggerModal').click();)">button name</button>

    <!-- hidden submit button -->
    <button type="submit" id="triggerModal" hidden value="Submit" class="btn btn-info btn-lg" data-toggle="modal" data-target="#myModal"></button>  

</form>

我接受这一点
按钮名称
你的验证码在哪里?@proeviz,谢谢你的回复,就像我说的,很简单。我只是在复选框中使用了必填字段。谢谢,现在唯一的问题是当我填写帖子url时,它不会运行,只是模式加载。我假设它与e.preventDefault()有关//停止submit@xTRIFAC70Rx你能再解释一下URL应该做什么吗?哦,你是说要将表单提交到的表单URL吗?是的,所以表单在弹出模式时仍应在后台提交。