I am trying to add form validation to my web app by restricting users to a certain length of username and password when they register for the first time.
The HTML code is:
<template name='home'>
<form class="register">
<p>Username: <input pattern=".{7, 12}" type="text" id='username' placeholder='Username' required></p><p id="demo1"></p>
<br>
<p>Password: <input pattern=".{7, 12}" type="password" id='password' placeholder='password' required></p><p id="demo2"></p>
<p><button type="submit" class="btn btn-primary">Create Account</button></p>
<br>
<p>Already have an account</p>
<br>
<h3><a href='{{pathFor route="login"}}'>Login</a></h3>
</form>
</template>
The JS code is:
Template.home.events({
'submit form':function(event){
event.preventDefault();
var username = document.getElementById('username').value;
var password = document.getElementById('password').value;
if ((username.checkValidity()==true) && (password.checkValidity()==true))
{
Accounts.createUser({
username: username,
password: password,
}, function(error){
if(error){
alert(error.reason);
event.target.password.value=''; // Output error if registration fails
} else {
Profile.insert({
name:'',
hobbies:'',
description:'',
currentUser:Meteor.userId(),
src:'',
followers:0,
following:0,
followedBy:[],
followingTo:[]
});
Router.go("createProfile"); // Redirect user if registration succeeds
}
});
}
else{
document.getElementById('demo1').innerHTML='Username must contain 7 to 12 characters.';
document.getElementById('demo2').innerHTML='Password must contain 7 to 12 characters.';
return false;
}
}
});
But on clicking the 'Create Account' button it doesnt links to any other page. Even on entering invalid username and password, the demo1 and demo2 paragraph show no text.