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位数。检查工作完美无缺，但即使不低于10，表格也会提交。我想防止如果条件为假我不希望表单被提交。如何实现这个目标？

Answer 1

将此添加到您的jQuery文档就绪函数：

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

当您提交表单时，它会调用您的函数，首先警告某些内容，然后返回。

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

Answer 2

在模型中尝试：

public function rules()
{
   return [
        [['phoneNo'], 'string' 'min' =>10, 'max' => 10], 
        [['phoneNo'], 'integer']     
   ]
}

Answer 3

使用onsubmit代替onclick事件。并在致电e.preventDefault();

后返回false

如何让Jquery停止表单提交

3 个答案: