CODEWITHSUNDEEP
aurelia
jbailie1991
jbailie1991

Reputation: 1345

Validation does not work for divs that are initially hidden

I have the following:

welcome-form.html

<template>
<form  submit.delegate="submit()" role="form" class="form-horizontal" validate.bind="validation">
    <div class="form-group">    
        <label class="control-label col-sm-2" for="firstName">First Name:</label>
        <div class="col-sm-10">
                <input id="firstName" type="text" value.bind="firstName" class="form-control">
        </div>
    </div>
    <div class="form-group">
        <label class="control-label col-sm-2" for="lastName">Last Name:</label>
        <div class="col-sm-10">
            <input id="lastName" type="text" value.bind="lastName" class="form-control">
        </div>
    </div>
    <div class="form-group">
        <label class="control-label col-sm-2">Full Name:</label>
        <div class="col-sm-10">
            <p>${fullName}</p>
        </div>
    </div>
    <div class="form-group">
        <div class="col-sm-offset-2 col-sm-10">
            <button type="submit" class="btn btn-default">Submit</button>
            <button click.delegate="toggleSubform()" class="btn btn-default">Advanced</button>
        </div>
    </div>
    <hr class="half-rule">
    <form role="form" class="form-horizontal"
    validate.bind="validation">
    <div class="form-group">
        <label class="control-label col-sm-2" for="email"
        >Email:</label>
        <div class="col-sm-10">
            <input id="emailAddr"class="form-control"
            value.bind="emailAddr">
            <span class="help-block">
                E.g. [email protected]
            </span>
        </div>
    </div>
    <div  if.bind="showSub" class="form-group">
        <label class="control-label col-sm-2" for="phone">Phone:</label>
        <div class="col-sm-3">
            <input id="phone" type="tel"
class="form-control" value.bind="phone">
        </div>
        <label class="control-label col-sm-2" for="mobile">Mobile:</label>
        <div class="col-sm-3">
            <input id="mobile" type="tel" class="form-control">
        </div>
    </div>
    <div if.bind="showSub" class="form-group">
        <label class="control-label col-sm-2">Age Group:</label>
        <div class="radio">
            <label><input type="radio" name="age1">18 - 30</label>
        </div>
        <div class="radio col-sm-offset-2">
            <label><input type="radio" name="age1">31-64</label>
        </div>
        <div class="radio col-sm-offset-2">
            <label><input type="radio" name="age1">65+</label>
        </div>
    </div>
    </form>
</form>
</template>

welcome-form.js

import {Validation} from 'aurelia-validation';
export class WelcomeForm{
static inject() { return [Validation]; }
constructor(validation){
this.firstName ='John';
this.lastName='Doe';
this.emailAddr='';
this.phone='(XXX)XXX-XXXX'
this.showSub = false;

this.validation = validation.on(this)
    .ensure('firstName')
    .isNotEmpty()
    .hasMinLength(3)
    .hasMaxLength(10)
    .containsOnlyAlpha()
    .ensure('lastName')
    .isNotEmpty()
    .hasMinLength(3)
    .hasMaxLength(10)
    .ensure('emailAddr')
    .isNotEmpty()
    .isEmail()
.ensure('phone')
    .isNotEmpty()
    .containsOnlyDigits();
}

get fullName(){
    return `${this.firstName} ${this.lastName}`;
}

submit(){
    this.validation.validate()
        .then( () => {
            alert(`Welcome, ${this.fullName}`);
        });
    }

toggleSubform(){
    this.showSub = !this.showSub;
}
}

Any divs that have if.bind="showSub" are initially hidden, as showSub is initially set to false. Some of these hidden fields have validation attached to them, e.g. the emailAddr input element has isNotEmpty() and isEmail() validation rules attached t it. The problem is, the validation does not work on the hidden fields when they are shown, in other words when i click on the button Advanced, the elements appear, but the validation messages will not fire when the fields are invalid.

I have tried removing the if from one or two of the divs and the validation rule acts as normal when this happens; the Email field will display 'is not a valid email address' when the if is removed and an invalid email address format is entered. I know that the validation is working because when i submit, I get an error in the console. Is there something I'm missing?

Upvotes: 0

Views: 245

Answers (1)

jbailie1991
jbailie1991

Reputation: 1345

Answer is down to usage of if.bind. I swapped if.bind for show.bind(Since that is what I was really attempting to do) and the validation rules now fire as expected

Upvotes: 0

Related Questions