Question

有表格。提交按钮不适用于id = "modal-btn-register-request"的ActiveForm。在JQuery中，通过单击此按钮，我调用$("#modal-btn-register-request").submit()并且表单已经过验证或未发送到操作。如何在单击按钮之前进行验证。关于按钮的全部内容，如果您插入标准Html::submitButton，如果表单中有错误，则不会发送数据

模型中的规则

public function rules()
{
    return [            
        [['email'], 'required'],
        [['email'], 'email'],            
        [['password','password_confirm'], 'required'],
    ];
}

视野中的表单

 <?php \yii\widgets\ActiveForm::begin(['action' => '/sign-up']); ?>
     <?php echo $form->field($registerForm, 'email')->textInput(['placeholder' => 'Input login', 'class' => 'modal-login__input inp-main']); ?>
     <?php echo $form->field($registerForm, 'password')->passwordInput(['placeholder' => 'Input password', 'class' => 'modal-login__input inp-main']) ?>
     <?php echo $form->field($registerForm, 'password_confirm')->passwordInput(['placeholder' => 'Confirm the password','class' => 'modal-login__input inp-main']) ?>
 <?php \yii\widgets\ActiveForm::end(); ?>

   <div class="modal-login__form-btns-cont clearfix">
     <div class="modal-login__form-btn-wp modal-login__form-submit-cont text-md-right float-md-right">
       <a class="modal-login__submit-btn" id="modal-btn-register-request" href="">Come in</a>
     </div>
   </div>

jQuery代码

$("#modal-btn-register-request").click(function() {
    $("#w3").submit();          
});

如果字段不正确，请不要发送表单，反之亦然？

或者在点击不属于ActiveForm的元素时如何发送表单并考虑验证

Answer 1

使用event.preventDefault（）和yiiActiveForm对象：

drowTable

Answer 2

试试这个

 <?php \yii\widgets\ActiveForm::begin(['action' => '/sign-up']); ?>
     <?php echo $form->field($registerForm, 'email')->textInput(['placeholder' => 'Input login', 'class' => 'modal-login__input inp-main']); ?>
     <?php echo $form->field($registerForm, 'password')->passwordInput(['placeholder' => 'Input password', 'class' => 'modal-login__input inp-main']) ?>
     <?php echo $form->field($registerForm, 'password_confirm')->passwordInput(['placeholder' => 'Confirm the password','class' => 'modal-login__input inp-main']) ?>
     <div class="modal-login__form-btns-cont clearfix">
         <div class="modal-login__form-btn-wp modal-login__form-submit-cont text-md-right float-md-right">
           <a class="modal-login__submit-btn" id="modal-btn-register-request" href="">Come in</a>
         </div>
     </div>

 <?php \yii\widgets\ActiveForm::end(); ?>

乍一看似乎你的按钮没有实际形式。

编辑：我认为你需要的东西可以用两种方式去做： 1）使用AJAX验证或 2）在您的视图中使用javascript（或JQuery，如果您愿意）在您调用$("#modal-btn-register-request").submit()之前处理字段

对于（1）你可以这样做：

以<?php \yii\widgets\ActiveForm::begin(['action' => '/sign-up', 'enableAjaxValidation' => true]); ?>

开头编辑表单

接下来，添加要验证的规则示例：

public function rules()
{
    return [            
        [['email'], 'required'],
        [['email'], 'email'],
        ['email', 'unique'], //<---for example
        [['password','password_confirm'], 'required'],
    ];
}

现在您需要添加一个if语句来添加您的操作（呈现表单的那个）以在控制器中捕获此AJAX调用

public function actionSignup(){ //<-- assuming its the signup action
        $model = new User();
        if(Yii::$app->request->isAjax && $model->load(Yii::$app->request->post())){
            Yii::$app->response->format = 'json';
            return ActiveForm::validate($model);
        }
        return $this->render('signup',[
            'model' => $model
        ]);
    }

如果你想验证甚至没有检查你的数据库，那么可以严格使用javascript（或JQuery），你可以选择选项（2）。在这种情况下，请查看问题check length of input field?

希望这有帮助。

提交前验证表格

2 个答案: