Custom Validation message is not showing up on the Page

Question

I have a input field of type email on the form which I have to validate the email address entered and show the validation error message when the user tries to navigate to the next page. It just not check for the pattern but also only allow few email domains. Below is the email field

<div class="form-group required">
    <label for="EmailAddr" class="control-label">Email</label>
    <input type="email" maxlength="150" id="EmailAddr" name="EmailAddr" class="form-control" data-bind="value : emailAddr" required />
</div> 

and the field in the viewmodel is

self.emailAddr = ko.observable().extend({ required: { params: true, message: "Required! Please enter a valid email" }, email: { params: true, message: "Required! Please enter a valid email" } });

And the Next page button function is like below

self.next = function () {
    self.errors = ko.validation.group(this);

    if (self.errors().length != 0) {
        self.errors.showAllMessages();
    }

    if (!formIsValid('Page_' + self.currentPage())) {
        $(window).scrollTop(0);
        return false;
    }

    if (self.referringPage() != null) {
        self.currentPage(self.referringPage());
        self.referringPage(null);
    } else {
        self.currentPage(self.currentPage() + 1);
    }
    self.gotoPage();
};

And formIsValid function on the validator.js file like

function formIsValid(formToValidate) {
// Get a handle to the form the button belongs to
var form = $('#' + formToValidate);
var valid = true;

// Turn off any old error messages so we're starting
// fresh.
$('.validation-error', form).hide();
$('.field-error', form).removeClass('field-error');

var emailPattern = /^[-a-z0-9~!$%^&*_=+}{\'?]+(\.[-a-z0-9~!$%^&*_=+}{\'?]+)*@([a-z0-9_][-a-z0-9_]*(\.[-a-z0-9_]+)*\.(aero|arpa|bio|biz|cat|com|coop|edu|gov|info|int|mil|museum|name|net|org|pro|travel|mobi|[a-z][a-z])|([0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}))(:[0-9]{1,5})?$/i;
$('input[type=email]', form).each(function (idx, elem) {
    if ($(elem).val() != '' && $(elem).is(':visible')) {
        if (!emailPattern.test($(elem).val())) {
            $(elem).addClass('field-error');
            $(elem).next().show();
            valid = false;
        }
    }
});
    return valid;
}

When I give the email as a@c it throws Required. Please enter a valid email error on the field or when I give domain listed in the email pattern like.com/,bio I can navigate to the next page. but when I try to give.xyz it doesnt let the user tonavigate to the next page nor it shows any validation error message on the field, What is that I am missing here. I am new to KnockoutJS and Validations. Any help is greatly appreciated

Answer 1

This has nothing to do with knockout or validations; it's purely your regex that's not working for xyz . The reason being that it's only working for 2-char domains and the ones in the given list.

If you add to the regex to allow for an optional 3rd char it works:

^[-a-z0-9~!$%^&*_=+}{\'?]+(\.[-a-z0-9~!$%^&*_=+}{\'?]+)*@([a-z0-9_][-a-z0-9_]*(\.[-a-z0-9_]+)*\.(aero|arpa|bio|biz|cat|com|coop|edu|gov|info|int|mil|museum|name|net|org|pro|travel|mobi|[a-z][a-z][a-z]?)|([0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}))(:[0-9]{1,5})?$

look for |[az][az]) where I added [az]?