javascript - 如何让Jquery停止表单提交

Question

这是我的 Yii2 表单

<?php $form = ActiveForm::begin(['id' => 'contact-form']); ?>
                <?= $form->field($model, 'name')->textInput(['id'=>'first-name']) ?>
                <?= $form->field($model, 'email') ?>
                <?= $form->field($model, 'subject') ?>
                <?= $form->field($model, 'phoneNo')->textInput(['id'=>'phone-no']) ?>
                <?= $form->field($model, 'location') ?>
                <?= $form->field($model, 'body')->textArea(['rows' => 6]) ?>
                <?= $form->field($model, 'verifyCode')->widget(Captcha::className(), [
                    'template' => '<div class="row"><div class="col-lg-3">{image}</div><div class="col-lg-6">{input}</div></div>',
                ]) ?>
                <div class="form-group">
                    <?= Html::submitButton('Submit', ['class' => 'btn btn-primary', 'name' => 'contact-button','onclick'=>"verifyData()"]) ?>
                </div>
            <?php ActiveForm::end(); ?>

这是我的脚本

<script type="text/javascript">
        function verifyData(e)
        {
            //~ alert("s");return false;
             phno = jQuery("#phone-no").val();
             var pattern = /^\d{10}$/;
                if (pattern.test(phno)) 
                {
                    alert("Your mobile number : " + phno);
                    return true;
                }
            alert("It is not valid mobile number.input 10 digits number!");
            e.preventDefault();
        }

</script>

基本上我尝试使用脚本是检查电话号码:是否为 10 位数字。检查工作正常，但即使 no 低于 10，表格也会提交。我想防止如果条件为假，我不希望提交表单。如何实现这一目标？

Answer 1

将其添加到您的 jQuery 文档就绪函数中:

$(document).on('submit', '#contact-form', function(e) {
    if (!verifyData())  {
        e.preventDefault();
    }
});

当您提交表单时，它会调用您的函数，首先会发出警报，然后返回。

如果它返回false，则它会阻止表单提交。