AJAX-Validation in advanced Template

Hey mates, I’m kinda stuck now and I don’t know what to do.

I’m working mainly with the Advanced Template and I’m stuck with the ajax-validation for unique usernames.

/frontend/models/SignupForm

(…)

public function rules()

    {

        return [

            ['username', 'filter', 'filter' => 'trim'],

            ['username', 'required'],

            ['username', 'unique', 'targetClass' => '\common\models\User', 'message' => 'This username has already been taken.'],

            ['username', 'string', 'min' => 2, 'max' => 255],


            ['email', 'filter', 'filter' => 'trim'],

            ['email', 'required'],

            ['email', 'email'],

            ['email', 'string', 'max' => 255],

            ['email', 'unique', 'targetClass' => '\common\models\User', 'message' => 'This email address has already been taken.'],


            ['password', 'required'],

            ['password', 'string', 'min' => 6],

        ];

    }

(…)

In my signup.php

<?php $form = ActiveForm::begin([

    'id' => 'form-signup',

    'fieldConfig' => [

        'template' => "{label}{input}{error}",

        'options' => [

            'tag' => 'p'

        ],

        'errorOptions' => [

            'tag' => 'span',

            'class' => 'error-msg',

        ],

     ],

     'requiredCssClass' => 'required-wrap',

 ]);


echo $form->field($model, 'username', [

    'enableAjaxValidation' => true

])->textInput(['autofocus' => false])


?>

The part of checking, if there is actually text is working. Leaving the field without text ends up in an error-message "cannot be empty" (…)

However, entering my username, which is taken, changes the class of the wrapper to this:

<div class="field-signupform-username required-wrap validating">

The call is correct and I can see the response in my inspector. The error-message is there as well, right where it should be, but it isn’t in my “error-msg” span. Actually, it is nowhere. As if the validation never ends correct?!

The YiiWebAsset(js) is also included, if that takes care of it

Update 1

The Response is looking correctly. It shows the error-msg, even in the correct wrap. It looks like this:

<p class="field-signupform-username required-wrap has-error">

    <label class="control-label" for="signupform-username">Username</label>

    <input type="text" id="signupform-username" class="form-control" name="SignupForm[username]" value="MyNick">

    <span class="error-msg">This username has already been taken.</span>

</p>

But it isn’t applied to my current site. As mentioined, it has the “has-error” class, while the live-form still has “validating”.

Please help me

Thanks guys

[s]It looks like a bug.

Try setting the "selectors" property explicitly to work around the issue.

<?php $form = ActiveForm::begin([

    'id' => 'form-signup',

    'fieldConfig' => [

        'template' => "{label}{input}{error}",

        'options' => [

            'tag' => 'p'

        ],

        'errorOptions' => [

            'tag' => 'span',

            'class' => 'error-msg',

        ],

        'selectors' => ['error' => '.error-msg'],

     ],

     'requiredCssClass' => 'required-wrap',

 ]);

[/s]

[EDIT]

Hmm, sorry, I get lost.

I thought I could reproduce the issue, but now I can not.

I don’t know what’s going on.

So no issue there for you? It works for you?

At first I thought I could reproduce the issue and solve it by specifying “selectors” explicitly. But, well, I don’t know why, I’m no longer able to reproduce the issue.

One thing I feel suspicious for your issue is "p" tag for "options". What will happen when you replace it with "div"?

Just changes the Layout, nothing too special about it. But what I figured out (and that is even more weird):

having

'enableAjaxValidation' => false

seems like completly messing up the stuff. Inputs doesn’t get re-validated.

For instance:

Field 1 -> empty -> next textbox => "Username cannot be empty"

Field 1 -> someText -> next textbox => "Username cannot be empty"

Without the AJAX-validation, it re-validates the stuff correct. It seems like the ajax-validation is just never running (or finishing). Even though I can actually see a response in my headers.

WTF I’m confused. No errors in the requests, everything looks fine… just the dom isn’t manipulated (and the classes never change, it is stuck on “validating” instead of “has-error”)

See Update 1 (1st post) for new information

Success!

Thanks to CeBe (Yii-irc), it works now. As it is now, the AdvancedTemplate doesn’t come with native AJAX-validation. Small adjustments have to be made. In Fact the following lines worked for me in the signupAction (siteController)

$model = new SignupForm();

    if ($model->load(Yii::$app->request->post())) {

        if (Yii::$app->request->isAjax) {

            Yii::$app->response->format = Response::FORMAT_JSON;

            return ActiveForm::validate($model);

        }


        if ($user = $model->signup()) {

            if (Yii::$app->getUser()->login($user)) {

                return $this->goHome();

            }

        }

    }


    return $this->render('signup', [

        'model' => $model,

    ]);

Oh, I didn’t know that. Anyway, glad that you’ve solved.