Validate form before submit

Question

There is a form. The submit button does not apply to ActiveForm with id = "modal-btn-register-request". In JQuery, by clicking on this button I call $("#modal-btn-register-request").submit() and the form has been validated or not sent to the action. How can I validate before clicking the button. It's all about the button, if you insert the standard Html::submitButton, if there are errors in the form, the data is not sent

rules in model

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

form in view

 <?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 code

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

if there is an incorrect field, do not send the form and vice versa?

or how you can send the form when clicking on an element that does not belong to ActiveForm and take into account the validation

Answer 1

Use event.preventDefault() and the yiiActiveForm object:

$("#modal-btn-register-request").click(function(event) {
    event.preventDefault();
    jQuery('#w3').yiiActiveForm().submit();    
});

Answer 2

try this

 <?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(); ?>

At first glance seems your button in not witnin the actual form.

Edit: I think for what you need you can go about doing in two ways: 1) use an AJAX validation or 2)Use javascript (or JQuery if you prefer) in your view to process the fields before yo call $("#modal-btn-register-request").submit()

For (1) you can do like so:

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

Next add the rule you want to verify ofr example:

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

Now you would need to add to your action (the one that renders the form) an if statement to catch this AJAX call in your controller like so

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
        ]);
    }

If you want to validate without even checking in your database then is can be doe strictly with javascript (or JQuery) and option (2) is your choice. In that case check out the question check length of input field?

Hope this helps.