Validating Input without Form Submit

I want to have a form with only one text input. This input will receive text from user and validated using "match" rule. This input will display error if the rule is not matched, but will show success message when it matches. And this form will disable any form submission.

Currenly I fullfil the requirement using the following code.




<?php

//exercise.php

namespace app\models;


use yii\base\Model;


class Exercise extends Model

{

public $name;

    public $email;


    public function rules()

    {

        return [

            ['handson1', 'required'],

            ['handson1', 'match', 'pattern' => '/^[a-zA-Z]+[0-9]*[a-zA-Z]*$/', 'message' => '{attribute} is not valid'],

        ];

    }

}

?>



and one method in controller.




    public function actionHandon()

    {

	$model = new Exercise();

        return $this->render('exercisepage', ['model' => $model]);

    }






//exercisepage.php

..

$form = ActiveForm::begin([

		'id' => 'test',

		'fieldConfig' => [

			'template' => "{label}<div>{input}</div>\n<div class=\"col-lg-12\">{error}</div>",

		],

	]); ?>


	<?= $form->field($model, 'handson1', [])->textInput(['data-default' => '', 'placeholder'=>'Enter your answer']) ?>


<?php								

ActiveForm::end();

?>



The problem is when every time the answer got right and we press return, the page submits. How can I disable it? And how can I show the success message in the form?

I’ve found solution for this, to disable the form submission I need to add new option in the ActiveForm configuration.




$form = ActiveForm::begin([

		'id' => 'test',

		'options' => ['onsubmit'=>'return false;'],

		'fieldConfig' => [

			'template' => "{label}<div>{input}</div>\n<div class=\"col-lg-12\">{error}</div>",

		],

	]); 

?>



I would probably just write this in a JS file. But this works.