I am making a login and register page. I am implementing form validation also. I want to do something like this- when the page loads first the LOGIN page gets active, when REGISTER is clicked then a register page gets active and display the form.
I have tried doing it over jsfiddle: jsfiddle link. I don't know why the transition effect does not work. It's just a simple transition on the panel-heading:
HTML-
<div class="panel-heading">
<div class="row">
<div class="col-xs-6">
LOGIN
</div>
<div class="col-xs-6">
REGISTER
</div>
</div>
JS-
$(document).ready(function() {
$("#login-form-link").click(function(e) {
$("#login-form").delay(100).fadeIn(100);
$("#register-form").fadeOut(100);
$("#register-form-link").removeClass("active");
$(this).addClass("active");
e.preventDefault();
});
$("#register-form-link").click(function(e) {
$("#register-form").delay(100).fadeIn(100);
$("#login-form").fadeOut(100);
$("#login-form-link").removeClass("active");
$(this).addClass("active");
e.preventDefault();
});
});
After it I am focusing on the validation of the REGISTER form. Believe me the register form opens in my browser I don't know why the register form does not open in jsfiddle!
Please look at the form its like this:
My problem is that the validation is not working and I don't know why. I have looked at many Stack Overflow links (this one was helpful) but none helps now.
you have multiple syntax errors in jQuery code also you are using wrong libraries,
fiddle provided in question used bootstrapValidator library also jqueryValidation lib, these 2 libraries has nothing to do with formValidation
if you checked your browser console log, half of the problems syntax errors e.g
missing multiple commas
wrong use of semi colon
wrong use of inverted commas
can easily be fixed also you can found $(...).formValidation is not a function in console log too means library is missing.
here is the working fiddle
syntax error fixed and correct and required formValidation libraries added
transition effect working
validation of the register form working
$(document).ready(function() {
$("#login-form-link").click(function(e) {
$("#login-form").delay(100).fadeIn(100);
$("#register-form").fadeOut(100);
$("#register-form-link").removeClass("active");
$(this).addClass("active");
e.preventDefault();
});
$("#register-form-link").click(function(e) {
$("#register-form").delay(100).fadeIn(100);
$("#login-form").fadeOut(100);
$("#login-form-link").removeClass("active");
$(this).addClass("active");
e.preventDefault();
});
$('#register-form').formValidation({
feedbackIcons: {
valid: 'glyphicon glyphicon-ok',
invalid: 'glyphicon glyphicon-remove',
validating: 'glyphicon glyphicon-refresh'
},
fields: {
fullname: {
validators: {
notEmpty: {
message: "Please enter this field"
},
regexp: {
regexp: /^[A-Za-z\s]{1,}[\.]{0,1}[A-Za-z\s]{0,}$/,
message: "full name cannot contain this symbol "
}
}
},
username: {
validators: {
notEmpty: {
message: "Please enter this field"
},
stringLength: {
min: 5,
max: 15,
message: "username must be more than 5 and less than 15 characters long"
},
regexp: {
regexp: /^[a-zA-Z0-9_\.]+$/,
message: 'username can only consist of alphabets, numbers, dot and underscore'
}
}
},
email: {
validators: {
notEmpty: {
message: "Please enter this field"
},
emailAddress: {
message: "invalid email!"
}
}
},
address: {
validators: {
notEmpty: {
message: "Please enter this field"
},
regexp: {
regexp: /^[a-zA-Z0-9\s,\/-]+$/,
message: "invalid symbol!"
}
}
},
pincode: {
validators: {
notEmpty: {
message: "Please enter this field"
},
stringLength: {
min: 6,
max: 6,
message: "invalid pincode!"
},
digits: {
message: "pin code can contain digits only"
}
}
},
phnumber: {
validators: {
notEmpty: {
message: "Please enter this field"
},
stringLength: {
min: 10,
max: 10,
message: "invalid phone number!"
},
digits: {
message: "phone number can contain digits only"
}
}
},
password: {
validators: {
notEmpty: {
message: "Please enter this field"
},
different: {
field: 'username',
message: 'The password cannot be the same as username'
},
identical: {
field: "confirm_password",
message: 'password and its confirm are not the same'
}
}
},
confirm_password: {
validators: {
notEmpty: {
message: "Please enter this field"
},
identical: {
field: "password",
message: 'password and its confirm are not the same'
}
}
}
}
})
.on('success.form.bv', function(e) {
var $form = $(e.target);
var bv = $form.data('bootstrapValidator');
$.post($form.attr('action'), $form.serialize(), function(result) {
console.log(result);
}, 'json');
});
});
body {
padding-top: 90px;
}
.panel-login {
border-style: solid;
border-color: #7B68EE;
-webkit-box-shadow: 1px 2px 3px 1px rgba(0, 0, 0, 0.2);
-moz-box-shadow: 1px 2px 3px 1px rgba(0, 0, 0, 0.2);
box-shadow: 1px 2px 3px 1px rgba(0, 0, 0, 0.2);
}
.panel-login>.panel-heading {
color: #7B68EE;
background-color: #fff;
border-color: #fff;
text-align: center;
}
.panel-login>.panel-heading a {
text-decoration: none;
color: #666;
font-weight: bold;
font-size: 15px;
-webkit-transition: all 0.1s linear;
-moz-transition: all 0.1s linear;
transition: all 0.1s linear;
}
.panel-login>.panel-heading a.active {
color: #7B68EE;
font-size: 18px;
}
.panel-login>.panel-heading hr {
margin-top: 10px;
margin-bottom: 0px;
clear: both;
border: 0;
height: 1px;
background-image: -webkit-linear-gradient(left, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.15), rgba(0, 0, 0, 0));
background-image: -moz-linear-gradient(left, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.15), rgba(0, 0, 0, 0));
background-image: -ms-linear-gradient(left, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.15), rgba(0, 0, 0, 0));
background-image: -o-linear-gradient(left, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.15), rgba(0, 0, 0, 0));
}
.panel-login input[type="text"],
.panel-login input[type="email"],
.panel-login input[type="password"] {
height: 45px;
border: 1px solid #ddd;
font-size: 16px;
-webkit-transition: all 0.1s linear;
-moz-transition: all 0.1s linear;
transition: all 0.1s linear;
}
.panel-login input:hover,
.panel-login input:focus {
outline: none;
-webkit-box-shadow: none;
-moz-box-shadow: none;
box-shadow: none;
border-color: #ccc;
}
input[type="submit"].btn-login {
background-color: #59B2E0;
outline: none;
color: #fff;
font-size: 14px;
height: auto;
font-weight: normal;
padding: 14px 0;
text-transform: uppercase;
border-color: #59B2E6;
}
input[type="submit"].btn-login:hover,
input[type="submit"].btn-login:focus {
color: #fff;
background-color: #53A3CD;
border-color: #53A3CD;
}
.forgot-password {
text-decoration: underline;
color: #888;
}
.forgot-password:hover,
.forgot-password:focus {
text-decoration: underline;
color: #666;
}
input[type="submit"].btn-register {
background-color: #59B2E0;
outline: none;
color: #fff;
font-size: 14px;
height: auto;
font-weight: normal;
padding: 14px 0;
text-transform: uppercase;
border-color: #59B2E6;
}
input[type="submit"].btn-register:hover,
input[type="submit"].btn-register:focus {
color: #fff;
background-color: #53A3CD;
border-color: #53A3CD;
}
<link rel="stylesheet" type="text/css" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<script src="https://cdn.jsdelivr.net/jquery.formvalidation/0.6.1/js/formValidation.min.js"></script>
<script src="https://cdn.jsdelivr.net/jquery.formvalidation/0.6.1/js/framework/bootstrap.min.js"></script>
<div class="container" style="margin-bottom: 5%;">
<div class="row">
<div class="col-md-6 col-md-offset-3">
<div class="panel panel-login">
<div class="panel-heading">
<div class="row">
<div class="col-xs-6">
LOGIN
</div>
<div class="col-xs-6">
REGISTER
</div>
</div>
<hr>
</div>
<div class="panel-body">
<div class="row">
<div class="col-lg-12">
<form id="login-form" action="/login" method="post" role="form" style="display: block;">
<div class="form-group">
<input type="text" name="username" pattern="^[_A-z0-9]{1,}$" maxlength="15" id="username" tabindex="1" class="form-control" placeholder="username" value="" required>
<!--error message like: "username already exist" -->
<span><p><!--error message here--></p></span>
</div>
<div class="form-group">
<input type="password" name="password" data-minlength="6" id="inputPassword" tabindex="1" class="form-control" placeholder="password" value="" required>
<!--error message like: "username and password do not match" -->
<span><p><!--error message here--></p></span>
</div>
<div class="form-group text-center">
<input type="checkbox" tabindex="3" name="remember" id="remember">
<label for="remember">Remember me</label>
</div>
<div class="form-group">
<div class="row">
<div class="col-sm-6 col-sm-offset-3">
<input type="submit" name="login-submit" id="login-submit" tabindex="4" class="form-control btn btn-login" value="Log in">
</div>
</div>
</div>
<div class="form-group">
<div class="row">
<div class="col-lg-12">
<div class="text-center">
Forgot Password?
</div>
</div>
</div>
</div>
</form>
<form id="register-form" action="/register" method="post" role="form" style="display: none;">
<!-- username -->
<div class="form-group">
<input type="text" name="username" id="username" tabindex="1" class="form-control" placeholder="username" value="" required>
</div>
<!-- email -->
<div class="form-group">
<input type="email" name="email" id="Email" tabindex="1" class="form-control" placeholder="email" value="" data-error="Email address is invalid" required>
</div>
<!-- fullname -->
<div class="form-group">
<input type="text" name="fullname" id="Name" tabindex="1" class="form-control" placeholder="full name" value="" required>
</div>
<!-- address -->
<div class="form-group">
<input type="text" name="address" id="address" tabindex="1" class="form-control" placeholder="address" value="" required>
</div>
<!-- pincode -->
<div class="form-group">
<input type="text" name="pincode" id="pincode" tabindex="1" class="form-control" placeholder="pincode" value="" data-error="Invalid Pin code!" required>
</div>
<!-- phone number -->
<div class="form-group">
<input type="text" name="phnumber" id="phnumber" tabindex="1" class="form-control" placeholder="phone number" value="" data-error="Invalid Phone Number!" required>
</div>
<!-- password -->
<div class="form-group">
<input type="password" name="password" id="inputPassword" tabindex="1" class="form-control" placeholder="password" value="" required>
</div>
<!-- confirm password -->
<div class="form-group">
<input type="password" name="confirm_password" id="confirmPassword" tabindex="1" class="form-control" placeholder="confirm password" value="" required>
</div>
<!-- register button -->
<div class="form-group">
<div class="row">
<div class="col-sm-6 col-sm-offset-3">
<input type="submit" name="register-submit" id="register-submit" tabindex="4" class="form-control btn btn-register" value="Register Now">
</div>
</div>
</div>
</form>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
Related
This is the just-validate library codes to validate my form, but it fails to submit the form after validation, it should submit after validating all the fields. I have tried to run these code but it does not run. These are the codes i've used. all field are verified. But it fails to submit the form
<!-- language: lang-js -->
<script>
const validation = new window.JustValidate('#appform', {
errorFieldCssClass: 'is-invalid',
errorLabelStyle: {
fontSize: '16px',
color: '#dc3545',
},
successFieldCssClass: 'is-valid',
successLabelStyle: {
fontSize: '16px',
color: '#20b418',
},
focusInvalidField: true,
lockForm: true,
});
validation
.addField('#fname', [
{
rule: 'required',
errorMessage: 'First name is required',
},{
rule: 'minLength',
value: 3,
},
])
.addField('#sname', [
{
rule: 'required',
errorMessage: 'Second name is required',
},{
rule: 'minLength',
value: 3,
},
])
.addField('#email', [
{
rule: 'required',
errorMessage: 'Email is required',
},
{
rule: 'email',
errorMessage: 'Enter a valid email',
}
])
.onSuccess((event) => {
document.getElementById("app-form").submit();
});
</script>
This in the CSS of my Code
<!-- language: lang-css -->
.form-group {
padding-right: 50px;
margin:20px;}
.form-control {
display: block;
width: 100%;
padding: 0.375rem 0.75rem;
font-size: 1rem;
line-height: 1.5;
color: #495057;
background-color: #fff;
background-clip: padding-box;
border: 1px solid #ced4da;
border-radius: 0.25rem;
}
.btn {
display: inline-block;
font-weight: 400;
text-align: center;
white-space: nowrap;
vertical-align: middle;
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
border: 1px solid transparent;
padding: 0.375rem 0.75rem;
font-size: 1rem;
line-height: 1.5;
border-radius: 0.25rem;}
.btn-primary {
color: #212529;
background-color: #78d5ef;
border-color: #78d5ef; }
<!-- language: lang-html -->
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Form Validation</title>
<script src="https://unpkg.com/just-validate#latest/dist/just-validate.production.min.js"></script>
<head>
<body>
<form id="appform" name="appform" action="process_form.php" method="post" novalidate >
<div class="form-group">
<input type="text" name="fname" id="fname" placeholder="First Name" class="form-control text-capitalize" autocomplete="on" spellcheck="false">
</div>
<div class="form-group">
<input type="text" name="sname" id="sname" placeholder="Second Name" class="form-control text-capitalize" autocomplete="on" spellcheck="false">
</div>
<div class="form-group">
<input type="text" id="email" name="email" placeholder="jayrous#example.com" class="form-control">
</div>
<div class="form-group ">
<input type="submit" name="submit" id="submit" class="btn btn-primary " value= "Submit Form">
</div>
</body>
<!-- end snippet -->
The id of your form is "appform":
<form id="appform" ...
but your JavaScript code is trying to get the element with an id of "app-form", which is a totally different id:
document.getElementById("app-form").submit();
try changing them to match, e.g.
document.getElementById("appform").submit();
How to Validate? Don’t allow Gmail, Yahoo, etc email addresses. And one more issue is that when all the fields are not entered submit should be disabled. when i fill all submit is enabled and when i remove one input after filling it, submit should be disabled, but still it's enabled. How to fix that?
$("#passwordv").on("focusout", function (e) {
if ($(this).val() != $("#passwordvConfirm").val()) {
$("#passwordvConfirm").removeClass("valid").addClass("invalid");
$('#btn-1').show();
} else {
$("#passwordvConfirm").removeClass("invalid").addClass("valid");
$('#btn').removeAttr("disabled");
$('#btn-1').hide();
}
});
$("#passwordvConfirm").on("keyup", function (e) {
if ($("#passwordv").val() != $(this).val()) {
$(this).removeClass("valid").addClass("invalid");
$('#btn-1').show();
} else {
$(this).removeClass("invalid").addClass("valid");
$('#btn').removeAttr("disabled");
$('#btn-1').hide();
}
});
$(document).ready(function () {
$('#passwordv').keyup(function () {
$('#result').html(checkStrength($('#passwordv').val()))
})
function checkStrength(password) {
var strength = 0
if (password.length < 6) {
$('#result').removeClass()
$('#result').addClass('short')
return 'Too short'
}
if (password.length > 7) strength += 1
// If password contains both lower and uppercase characters, increase strength value.
if (password.match(/([a-z].*[A-Z])|([A-Z].*[a-z])/)) strength += 1
// If it has numbers and characters, increase strength value.
if (password.match(/([a-zA-Z])/) && password.match(/([0-9])/)) strength += 1
// If it has one special character, increase strength value.
if (password.match(/([!,%,&,#,#,$,^,*,?,_,~])/)) strength += 1
// If it has two special characters, increase strength value.
if (password.match(/(.*[!,%,&,#,#,$,^,*,?,_,~].*[!,%,&,#,#,$,^,*,?,_,~])/)) strength += 1
// Calculated strength value, we can return messages
// If value is less than 2
if (strength < 2) {
$('#result').removeClass()
$('#result').addClass('weak')
return 'Weak'
} else if (strength == 2) {
$('#result').removeClass()
$('#result').addClass('good')
return 'Good'
} else {
$('#result').removeClass()
$('#result').addClass('strong')
return 'Strong'
}
}
});
$('.form').find('input, textarea').on('keyup blur focus', function (e) {
var $this = $(this),
label = $this.prev('label');
if (e.type === 'keyup') {
if ($this.val() === '') {
label.removeClass('active highlight');
} else {
label.addClass('active highlight');
}
} else if (e.type === 'blur') {
if ($this.val() === '') {
label.removeClass('active highlight');
} else {
label.removeClass('highlight');
}
} else if (e.type === 'focus') {
if ($this.val() === '') {
label.removeClass('highlight');
} else if ($this.val() !== '') {
label.addClass('highlight');
}
}
});
$('.tab a').on('click', function (e) {
e.preventDefault();
$(this).parent().addClass('active');
$(this).parent().siblings().removeClass('active');
target = $(this).attr('href');
$('.tab-content > div').not(target).hide();
$(target).fadeIn(600);
});
*,
*:before,
*:after {
box-sizing: border-box;
}
html {
overflow-y: scroll;
}
body {
background: #f1f0ee;
font-family: 'Titillium Web', sans-serif;
}
a {
text-decoration: none;
color: #1ab188;
transition: .5s ease;
}
a:hover {
color: #179b77;
}
.form {
background: rgba(19, 35, 47, 0.9);
padding: 40px;
max-width: 600px;
margin: 130px auto;
border-radius: 4px;
box-shadow: 0 4px 10px 4px rgba(19, 35, 47, 0.3);
}
#media only screen and (max-width: 768px) {
.form {
background: rgba(19, 35, 47, 0.9);
padding: 40px;
max-width: 600px;
margin: 30px auto;
border-radius: 4px;
box-shadow: 0 4px 10px 4px rgba(19, 35, 47, 0.3);
}
}
.tab-group {
list-style: none;
padding: 0;
margin: 0 0 40px 0;
}
.tab-group:after {
content: "";
display: table;
clear: both;
}
.tab-group li a {
display: block;
text-decoration: none;
padding: 15px;
background: rgba(160, 179, 176, 0.25);
color: #a0b3b0;
font-size: 20px;
float: left;
width: 50%;
text-align: center;
cursor: pointer;
transition: .5s ease;
}
.tab-group li a:hover {
background: #179b77;
color: #ffffff;
}
.tab-group .active a {
background: #1ab188;
color: #ffffff;
}
.tab-content>div:last-child {
display: none;
}
h1 {
text-align: center;
color: #ffffff !important;
font-weight: 300;
margin: 0 0 40px !important;
}
label {
position: absolute;
-webkit-transform: translateY(6px);
transform: translateY(6px);
left: 13px;
color: rgba(255, 255, 255, 0.5);
transition: all 0.25s ease;
-webkit-backface-visibility: hidden;
pointer-events: none;
margin-top: 18px;
}
label .req {
margin: 2px;
color: #1ab188;
}
label.active {
-webkit-transform: translateY(-25px);
transform: translateY(-25px);
left: 2px;
font-size: 14px;
}
label.active .req {
opacity: 0;
}
label.highlight {
color: #ffffff;
}
input,
textarea {
font-size: 22px;
display: block;
width: 100%;
height: 100%;
padding: 8px 10px;
background: none;
background-image: none;
border: 1px solid #a0b3b0;
color: #ffffff;
border-radius: 0;
transition: border-color .25s ease, box-shadow .25s ease;
}
input:focus,
textarea:focus {
outline: 0;
border-color: #1ab188;
}
textarea {
border: 2px solid #a0b3b0;
resize: vertical;
}
.field-wrap {
position: relative;
margin-bottom: 25px;
}
.top-row:after {
content: "";
display: table;
clear: both;
}
.top-row>div {
float: left;
width: 48%;
margin-right: 4%;
}
.top-row>div:last-child {
margin: 0;
}
.button {
border: 0;
outline: none;
border-radius: 50px;
padding: 15px 0;
font-size: 20px;
font-weight: 600;
text-transform: uppercase;
letter-spacing: .1em;
background: #1ab188;
color: #ffffff;
transition: all 0.5s ease;
-webkit-appearance: none;
}
.button:hover,
.button:focus {
background: #179b77;
}
.button-block {
display: block;
width: 50%;
margin: 0 auto;
}
.forgot {
text-align: right;
}
#toast-container {
top: 4% !important;
right: 40% !important;
left: 40%;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<!-- Compiled and minified CSS -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/css/materialize.min.css">
<!-- Compiled and minified JavaScript -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/js/materialize.min.js"></script>
<div class="form">
<ul class="tab-group">
<li class="tab active">Log In</li>
<li class="tab">Sign Up</li>
</ul>
<div class="tab-content">
<div id="login">
<form id="form_id" method="post" name="myform">
<div class="field-wrap">
<label>
User Name<span class="req">*</span>
</label>
<input type="text" autocomplete="off" name="username" id="username" required>
</div>
<div class="field-wrap">
<label>
Password<span class="req">*</span>
</label>
<input type="password" autocomplete="off" name="password" id="password" required>
</div>
<p class="forgot">Forgot Password?</p>
<input type="button" value="Log in" id="submit" onclick="validate()" class="button button-block">
</form>
</div>
<div id="signup">
<form>
<div class="field-wrap">
<label>
Name<span class="req">*</span>
</label>
<input type="text" required autocomplete="off" />
</div>
<div class="field-wrap">
<label>
Email Address<span class="req">*</span>
</label>
<input type="email" required autocomplete="off" />
</div>
<div class="field-wrap">
<label>
Company Details<span class="req">*</span>
</label>
<input type="text" required autocomplete="off" />
</div>
<div class="field-wrap">
<label for="passwordv">
Set A Password<span class="req">*</span>
</label>
<input id="passwordv" type="password" class="validate" required autocomplete="off" />
<span id="result" style="color: white;"></span>
</div>
<div class="field-wrap" style="margin-bottom: 0px">
<label id="lblPasswordvConfirm" for="passwordvConfirm" data-error="Password not match"
data-success="Password Match">
Confirm Password<span class="req">*</span>
</label>
<input id="passwordvConfirm" type="password" required autocomplete="off" />
</div>
<label class="field-wrap" id="btn-1" style="display: none;color: white;font-size: 15px">password
didn't match
</label>
<input type="submit" value="submit" id="btn" class="button button-block" style="margin-top:20px;cursor:not-allowed"
disabled />
</form>
</div>
</div><!-- tab-content -->
</div> <!-- /form -->
Okay, so I broke down your code a bit to make it more easily understood. This example will only include your signup part of your application.
As I explained in my comment, what you could do to test the E-mails to see whether they are a Gmail or a Yahoo E-mail, is by using regular expressions (RegExp).
Example of Gmail RegExp:
/([a-zA-Z0-9]+)([\.{1}])?([a-zA-Z0-9]+)\#gmail([\.])com/g
Example of Yahoo RegExp:
/^[^#]+#(yahoo|ymail|rocketmail)\.(com|in|co\.uk)$/i
In my example, I'll put them into functions for simplicity.
Gmail RegExp function:
function regExpGmail() {
return RegExp(/([a-zA-Z0-9]+)([\.{1}])?([a-zA-Z0-9]+)\#gmail([\.])com/g);
}
Yahoo RegExp function:
function regExpYahoo() {
return RegExp(/^[^#]+#(yahoo|ymail|rocketmail)\.(com|in|co\.uk)$/i);
}
Now, I altered some of your code a bit in order to have some selectors to go by. Some of your input fields did not contain any selectors, such as name or id, while others did. So I took the liberty to add some.
One thing to note, is that the id you assigned your password input field (not the password confirm one, but the one before that) had some id conflicts. Therefore I took the liberty to change the id accordingly.
I then made a function handling all the validation logic of the input fields to fit your needs in your question. However, again, pretty simplified. I would suggest you alter it to fit your solution a little bit better, but it should give you more than a general idea.
Full Example:
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<!-- Compiled and minified CSS -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/css/materialize.min.css">
<!-- Compiled and minified JavaScript -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/js/materialize.min.js"></script>
<script>
function regExpGmail() {
return RegExp(/([a-zA-Z0-9]+)([\.{1}])?([a-zA-Z0-9]+)\#gmail([\.])com/g);
}
function regExpYahoo() {
return RegExp(/^[^#]+#(yahoo|ymail|rocketmail)\.(com|in|co\.uk)$/i);
}
function validateInputs() {
reGmail=regExpGmail();
reYahoo=regExpYahoo();
var result = true;
var nameCheck=$('#nameField').val();
var emailCheck=$('#emailField').val();
var compDetailsCheck=$('#compDetailsField').val();
var passwordCheck=$('#passwordvz').val();
var passwordConfirmCheck=$('#passwordvConfirm').val();
if(!nameCheck) {
result=false;
$('#nameError').html('Name is missing!');
}
else {
$('#nameError').html('');
}
if(!emailCheck) {
result=false;
$('#emailError').html('E-mail is missing!');
}
else if(reGmail.test(emailCheck)) {
result=false;
$('#emailError').html('Gmail is not allowed!');
}
else if(reYahoo.test(emailCheck)) {
result=false;
$('#emailError').html('Yahoo is not allowed!');
}
else {
$('#emailError').html('');
}
if(!compDetailsCheck) {
result=false;
$('#compDetailsError').html('Company Details is missing!');
}
else {
$('#compDetailsError').html('');
}
if(!passwordCheck) {
result=false;
$('#passwordError').html('Password is missing!');
}
else {
$('#passwordError').html('');
}
if(passwordCheck != passwordConfirmCheck) {
result=false;
$('#passwordError2').html('The passwords do not match!');
}
else {
$('#passwordError2').html('');
}
if(result == true) {
$('#btn').removeAttr('disabled');
$('#btn').css("cursor", "");
alert('Everything ok, you may now press the submit button!');
}
}
</script>
<div class="form">
<div class="tab-content">
<div id="signup">
<form>
<div class="field-wrap">
<span id="nameError" style="color: red !important;"></span><br />
<label>
Name<span class="req">*</span>
</label>
<input type="text" id="nameField" required autocomplete="off" onkeyup="validateInputs();" /><br />
</div>
<div class="field-wrap">
<span id="emailError" style="color: red !important;"></span><br />
<label>
Email Address<span class="req">*</span>
</label>
<input type="email" id="emailField" required autocomplete="off" onkeyup="validateInputs();" /><br />
</div>
<div class="field-wrap">
<span id="compDetailsError" style="color: red !important;"></span><br />
<label>
Company Details<span class="req">*</span>
</label>
<input type="text" id="compDetailsField" required autocomplete="off" onkeyup="validateInputs();" /><br />
</div>
<div class="field-wrap">
<span id="passwordError" style="color: red !important;"></span><br />
<label for="passwordv">
Set A Password<span class="req">*</span>
</label>
<input id="passwordvz" type="password" class="validate" required autocomplete="off" onkeyup="validateInputs();" /><br />
</div>
<div class="field-wrap" style="margin-bottom: 0px">
<span id="passwordError2" style="color: red !important;"></span><br />
<label id="lblPasswordvConfirm" for="passwordvConfirm" data-error="Password not match"
data-success="Password Match">
Confirm Password<span class="req">*</span>
</label>
<input id="passwordvConfirm" type="password" required autocomplete="off" onkeyup="validateInputs();" /><br />
</div>
<input type="submit" value="submit" id="btn" class="button button-block" style="margin-top:20px;cursor:not-allowed" disabled />
</form>
</div>
</div><!-- tab-content -->
</div> <!-- /form -->
Screenshots of the validation process:
I have this code below that consists of a HTML form and i'm currently using a library jQueryValidation.js for my form validation. The problem is when i leave my first name and last name empty the labels keep appearing beside my input fields.
I have tried to remove the inline-block from my inputs CSS but it still doesn't seem to be working. Any help would be greatly appreciated. The image below is what i'm trying to achieve.
$().ready(function() {
// validate the comment form when it is submitted
$("#commentForm").validate();
// validate signup form on keyup and submit
$("#signupForm").validate({
rules: {
fname: "required",
lname: "required",
password: {
required: true,
minlength: 8
},
cpassword: {
required: true,
minlength: 8,
equalTo: "#password"
},
email: {
required: true,
email: true
},
topic: {
required: "#newsletter:checked",
minlength: 2
},
agree: "required"
},
messages: {
firstname: "Your first name is required.",
lastname: "Please enter your lastname",
username: {
required: "Please enter a username",
minlength: "Your username must consist of at least 2 characters"
},
password: {
required: "Please provide a password",
minlength: "Your password must be at least 8 characters long"
},
confirm_password: {
required: "Please provide a password",
minlength: "Your password must be at least 8 characters long",
equalTo: "Please enter the same password as above"
},
email: "Please enter a valid email address",
}
});
});
input[type="text"],
input[type="email"],
input[type="password"] {
padding: 4px 20px;
height: 35px;
border: 1px solid black;
margin: 10px;
border-radius: 3px;
flex-grow: 1;
}
.form-row {
flex-direction: row;
display: flex;
}
.form-panel {
margin-left: auto;
margin-right: auto;
width: 60%;
}
input {
display: block;
}
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="//code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
<script type="text/javascript" src="https://cdn.jsdelivr.net/npm/jquery-validation#1.17.0/dist/jquery.validate.js"></script>
<style>
</style>
</head>
<body>
<form class="form-panel" id="signupForm">
<div class="form-row form-name">
<input type="text" name="fname" placeholder="First Name">
<input type="text" name="lname" placeholder="Last Name">
<br>
</div>
<div class="form-row form-email">
<input type="email" name="email" placeholder="Email Address">
<br>
</div>
<div class="form-row form-password">
<input type="password" name="password" placeholder="Password">
<input type="password" name="cpassword" placeholder="Comfirm Password">
</div>
<input type="submit" class="btn btn-default submit-button" value="Sign up!">
</form>
<script>
</script>
</body>
</html>
Just wrap your inputs in divs:
$().ready(function() {
// validate the comment form when it is submitted
$("#commentForm").validate();
// validate signup form on keyup and submit
$("#signupForm").validate({
rules: {
fname: "required",
lname: "required",
password: {
required: true,
minlength: 8
},
cpassword: {
required: true,
minlength: 8,
equalTo: "#password"
},
email: {
required: true,
email: true
},
topic: {
required: "#newsletter:checked",
minlength: 2
},
agree: "required"
},
messages: {
firstname: "Your first name is required.",
lastname: "Please enter your lastname",
username: {
required: "Please enter a username",
minlength: "Your username must consist of at least 2 characters"
},
password: {
required: "Please provide a password",
minlength: "Your password must be at least 8 characters long"
},
cpassword: {
required: "Please provide a password",
minlength: "Your password must be at least 8 characters long",
equalTo: "Please enter the same password as above"
},
email: "Please enter a valid email address",
}
});
});
* {
box-sizing:border-box;
}
input[type="text"],
input[type="email"],
input[type="password"] {
padding: 4px 20px;
height: 35px;
border: 1px solid black;
border-radius: 3px;
width:100%;
}
.form-row {
flex-direction: row;
display: flex;
}
.form-row > div {
margin: 10px;
flex-grow:1;
}
.form-panel {
margin-left: auto;
margin-right: auto;
width: 60%;
}
input {
display: block;
}
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="//code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
<script type="text/javascript" src="https://cdn.jsdelivr.net/npm/jquery-validation#1.17.0/dist/jquery.validate.js"></script>
<style>
</style>
</head>
<body>
<form class="form-panel" id="signupForm">
<div class="form-row form-name">
<div><input type="text" name="fname" placeholder="First Name"></div>
<div><input type="text" name="lname" placeholder="Last Name"></div>
</div>
<div class="form-row form-email">
<div><input type="email" name="email" placeholder="Email Address"></div>
</div>
<div class="form-row form-password">
<div><input type="password" name="password" placeholder="Password"></div>
<div><input type="password" name="cpassword" placeholder="Comfirm Password"></div>
</div>
<input type="submit" class="btn btn-default submit-button" value="Sign up!">
</form>
<script>
</script>
</body>
</html>
please use the following code, i made changes to your HTML by wrapping the elements in DIVs, and altered your CSS
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="//code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
<script type="text/javascript" src="https://cdn.jsdelivr.net/npm/jquery-
validation#1.17.0/dist/jquery.validate.js"></script>
<style>
</style>
</head>
<body>
<form class="form-panel" id="signupForm">
<div class="form-fname">
<input type="text" name="fname" placeholder="First Name">
</div>
<div class="form-lname">
<input type="text" name="lname" placeholder="Last Name">
<br>
</div>
<div class="form-email">
<input type="email" name="email" placeholder="Email Address">
<br>
</div>
<div class="form-password">
<input type="password" name="password" placeholder="Password">
</div>
<div class="form-password-confirm">
<input type="password" name="cpassword" placeholder="Comfirm Password">
</div>
<input type="submit" class="btn btn-default submit-button" value="Sign up!">
</form>
<script>
</script>
</body>
</html>
The CSS Code
.form-panel {
margin-left: auto;
margin-right: auto;
width: 60%;
position : relative;
display : block;
}
input[type="text"],
input[type="password"] {
padding: 4px 7px;
height: 35px;
border: 1px solid black;
border-radius: 3px;
position: relative;
width: 89%;
display: block;
}
input[type="email"]{
padding: 4px 0px 4px 5px;
height: 35px;
border: 1px solid black;
border-radius: 3px;
width: 98%;
display: block;
position: relative;
}
/*First name row*/
.form-fname{
display : inline-block;
position : relative;
width : 45%;
}
/*Last name row*/
.form-lname{
display : inline-block;
position : relative;
width : 45%;
float : right;
}
/*Email row*/
.form-email{
display : block;
position : relative;
width : 100%;
}
/*Password row*/
.form-password{
display : inline-block;
position : relative;
width : 45%;
}
/*Password Confirm row*/
.form-password-confirm{
display : inline-block;
position : relative;
width : 45%;
float : right;
}
label{
display : block;
position : relative;
width : 100%;
margin-top : 2px;
margin-bottom : 5px
}
.submit-button{
margin-top : 6px
}
I have been trying to get this to work for a while now. I cannot connect the login function to the form.
I have tried onsubmit on both the form tag and the button input tag, i have tried onclick but it does not get the code from js function.
index1.html
<!DOCTYPE html>
<html lang="en">
<head>
<title>Google maps</title>
<meta name="viewport" content="initial-scale=1.0">
<meta charset="utf-8">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js"></script>
<!--<link rel="http://ajax.googleapis.com/ajax/libs/jqueryui/1.12.1/themes/smoothness/jquery-ui.css">-->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<link rel="stylesheet" href="https://ajax.googleapis.com/ajax/libs/jqueryui/1.12.1/themes/smoothness/jquery-ui.css">
<script src="util.js"></script>
<script src="JavaScript.js"></script>
<script type="text/javascript"></script>
<style>
#container {
width: 1200px;
}
#map {
width: 80%;
min-height: 600px;
/*float: right;*/
margin-top: 15px;
margin-left: auto;
margin-right: auto;
}
#img {
width: 150px;
height: 150px;
float: left;
margin-top: auto;
}
/*sökruta*/
#searchBox {
background-color: #ffffff;
padding: 5px;
font-family: 'Roboto','sans-serif';
margin-bottom: 10px;
float: top;
}
/*
html, body {
height: 100%;
margin: 0;
padding: 0;
}
*/
.search-form .form-group {
float: right !important;
transition: all 0.35s, border-radius 0s;
width: 32px;
height: 32px;
background-color: #fff;
box-shadow: 0 1px 1px rgba(0, 0, 0, 0.075) inset;
border-radius: 25px;
border: 1px solid #ccc;
}
.search-form .form-group input.form-control {
padding-right: 20px;
border: 0 none;
background: transparent;
box-shadow: none;
display:block;
}
.search-form .form-group input.form-control::-webkit-input-placeholder {
display: none;
}
.search-form .form-group input.form-control:-moz-placeholder {
/* Firefox 18- */
display: none;
}
.search-form .form-group input.form-control::-moz-placeholder {
/* Firefox 19+ */
display: none;
}
.search-form .form-group input.form-control:-ms-input-placeholder {
display: none;
}
.search-form .form-group:hover,
.search-form .form-group.hover {
width: 100%;
border-radius: 4px 25px 25px 4px;
}
.search-form .form-group span.form-control-feedback {
position: absolute;
top: -1px;
right: -2px;
z-index: 2;
display: block;
width: 34px;
height: 34px;
line-height: 34px;
text-align: center;
color: #3596e0;
left: initial;
font-size: 14px;
}
.form-group {
max-width: 300px;
margin-right: auto;
margin-left: auto;
}
</style>
</head>
<body id="container">
<img id="img" src="http://www2.math.su.se/icsim/images/sterik.jpg" alt="Stockholm"/>
<div class="row">
<br>
<div class="col-md-4 col-md-offset-3">
<form action="" class="search-form">
<div class="form-group has-feedback">
<label id="Search" class="sr-only">Search</label>
<input type="text" class="form-control" name="search" id="searchField" placeholder="Sök">
<span class="glyphicon glyphicon-search form-control-feedback"></span>
</div>
</form>
</div>
<div class="form-group">
<form id="loginForm" name="loginForm" method="POST">
<label for="user">Användarnamn: </label>
<br>
<input class="form-control" type="text" id="user" name="user" required>
<br>
<label for="password">Lösenord: </label>
<br>
<input class="form-control" type="password" id="password" name="passwords" required>
<br>
<br>
<input class="form-control" type="submit" id="login" value="Logga in" onclick="login()">
</form>
</div>
<div id="map">
</div>
<script async defer
src="https://maps.googleapis.com/maps/api/js?key=AIzaSyDNPkC40KP9lMKHUsJW7q403qnwRqYkTno&callback=initMap">
</script>
</div>
</body>
JavaScript.js
function login() {
//spara username och password i två varibler med samma namn från formet.
var username = document.getElementById("user").value;
var password = document.getElementById("password").value;
if(username === "admin"
&& password === "123" )
{
alert( "validation succeeded" );
location.href="adminView.php";
}
else
{
alert( "validation failed" );
location.href="index1.html";
}
}
I have created working JSFiddle - Please Check : https://jsfiddle.net/5w6fg52m/1/
Below Code working fine :
<script>
//just change function name as it's conflict with button id
function login1() {
//spara username och password i två varibler med samma namn från formet.
var username = document.getElementById("user").value;
var password = document.getElementById("password").value;
if(username === "admin"
&& password === "123" )
{
alert( "validation succeeded" );
location.href="adminView.php";
}
else
{
alert( "validation failed" );
location.href="index1.html";
}
return false;
}
</script>
//HTML
<div class="form-group">
<form id="loginForm" name="loginForm" method="POST">
<label for="user">Användarnamn: </label>
<br>
<input class="form-control" type="text" id="user" name="user" required>
<br>
<label for="password">Lösenord: </label>
<br>
<input class="form-control" type="password" id="password" name="passwords" required>
<br>
<br>
<input class="form-control" type="button" id="login" value="Logga in" onclick="return login1();">
</form>
</div>
-> I have created other version of JSFiddle, so you come to know conflict issue easily: https://jsfiddle.net/5w6fg52m/2/
Here i have keep function name same(login) and change ID of submit button.
You can set the submit event directly to your like
document.getElementById("loginForm").onsubmit = function() { ... };
Bellow a sample snippet :
window.onload = function(){
document.getElementById("loginForm").onsubmit = function() {
//spara username och password i två varibler med samma namn från formet.
var username = document.getElementById("user").value;
var password = document.getElementById("password").value;
if (username === "admin" &&
password === "123") {
alert("validation succeeded");
//location.href = "adminView.php";
} else {
alert("validation failed");
//location.href = "index1.html";
}
// to prevent submit
return false;
}
}
<div class="form-group">
<form id="loginForm" name="loginForm" method="POST">
<label for="user">Användarnamn: </label>
<br>
<input class="form-control" type="text" id="user" name="user" required>
<br>
<label for="password">Lösenord: </label>
<br>
<input class="form-control" type="password" id="password" name="passwords" required>
<br>
<br>
<input class="form-control" type="submit" id="login" value="Logga in">
</form>
</div>
This happens when you declare variable or function with the same name as declare before. just rename login function or rename id="login".
i need one help.I need to display my button while all input has some value using Angular.js.Let me to explain my code below.
<div class="input-group bmargindiv1 col-md-12">
<span class="input-group-addon ndrftextwidth text-right" style="width:180px">Product Name :</span>
<select class="form-control" id="pro_name" ng-model="pro_name" ng-change="removeBorder('pro_name');" ng-readonly="periodread" >
<option value="">Select Product</option>
<option value="1">Britania</option>
<option value="0">Soap/option>
</select>
</div>
<div class="input-group bmargindiv1 col-md-12">
<span class="input-group-addon ndrftextwidth text-right" style="width:180px">Unit Cost Price :</span>
<input type="text" name="discount" id="ucp" class="form-control" placeholder="Add unit cost price" ng-model="unit_cost_price" ng-keypress="clearField('ucp');" ng-readonly="isChecked=='false'">
</div>
<div class="input-group bmargindiv1 col-md-12">
<span class="input-group-addon ndrftextwidth text-right" style="width:180px">Unit Sale Price :</span>
<input type="text" name="discount" id="usp" class="form-control" placeholder="Add unit sale price" ng-model="unit_sale_price" ng-keypress="clearField('usp');" ng-readonly="isChecked=='false'">
</div>
<div class="input-group bmargindiv1 col-md-12">
<span class="input-group-addon ndrftextwidth text-right" style="width:180px">Quantity :</span>
<input type="text" name="discount" id="quantity" class="form-control" placeholder="Add quantity" ng-model="quantity" ng-keypress="clearField('quantity');">
</div>
<div class="input-group bmargindiv1 col-md-12" ng-show="displayRadio">
<input type="radio" name="favoriteColors" ng-model="isChecked" value="true">Add new stock
<input type="radio" name="favoriteColors" ng-model="isChecked" value="false">Update stock
</div>
<input type="button" class="btn btn-success" ng-click="addProductstockData(billdata);" id="addProfileData" ng-value="buttonName" ng-show="showAddButton"/>
In the code i need when all field has some value the button will display to user.User can also type/select the value in input field and for some cases values are also appending inside input field bu another button click.So here i need when user has any value inside the input fields then only button will display to user.Please help me.
Here`s the working plunker! of your code.
All you need to do is wrap up the inputs in the <form name="theForm" novalidate></form> and give required attribute to inputs and show the button only once the required fields has some value in it, like <button ng-show="theForm.$valid"></button>. Hope that helps
var app = angular.module('form-example', []);
app.directive('passwordValidate', function() {
return {
require: 'ngModel',
link: function(scope, elm, attrs, ctrl) {
ctrl.$parsers.unshift(function(viewValue) {
scope.pwdValidLength = (viewValue && viewValue.length >= 8 ? 'valid' : undefined);
scope.pwdHasLetter = (viewValue && /[A-z]/.test(viewValue)) ? 'valid' : undefined;
scope.pwdHasNumber = (viewValue && /\d/.test(viewValue)) ? 'valid' : undefined;
if(scope.pwdValidLength && scope.pwdHasLetter && scope.pwdHasNumber) {
ctrl.$setValidity('pwd', true);
return viewValue;
} else {
ctrl.$setValidity('pwd', false);
return undefined;
}
});
}
};
});
.input-help {
display: none;
position:absolute;
z-index: 100;
top: -6px;
left: 160px;
width:200px;
padding:10px;
background:#fefefe;
font-size:.875em;
border-radius:5px;
box-shadow:0 1px 3px #aaa;
border:1px solid #ddd;
opacity: 0.9;
}
.input-help::before {
content: "\25C0";
position: absolute;
top:10px;
left:-12px;
font-size:16px;
line-height:16px;
color:#ddd;
text-shadow:none;
}
.input-help h4 {
margin:0;
padding:0;
font-weight: normal;
font-size: 1.1em;
}
/* Always hide the input help when it's pristine */
input.ng-pristine + .input-help {
display: none;
}
/* Hide the invalid box while the input has focus */
.ng-invalid:focus + .input-help {
display: none;
}
/* Show a blue border while an input has focus, make sure it overrides everything else */
/* Overriding Twitter Bootstrap cuz I don't agree we need to alarm the user while they're typing */
input:focus {
color: black !important;
border-color: rgba(82, 168, 236, 0.8) !important;
-webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075), 0 0 8px rgba(82, 168, 236, 0.6) !important;
-moz-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075), 0 0 8px rgba(82, 168, 236, 0.6) !important;
box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075), 0 0 8px rgba(82, 168, 236, 0.6) !important;
}
/* Show green border when stuff has been typed in, and its valid */
.ng-dirty.ng-valid {
border-color:#3a7d34;
}
/* Show red border when stuff has been typed in, but its invalid */
.ng-dirty.ng-invalid {
border-color:#ec3f41;
}
/* Show the help box once it has focus */
.immediate-help:focus + .input-help {
display: block;
}
/* Immediate help should be red when pristine */
.immediate-help.ng-pristine:focus + .input-help {
border-color:#ec3f41;
}
.immediate-help.ng-pristine:focus + .input-help::before {
color:#ec3f41;
}
/* Help hould be green when input is valid */
.ng-valid + .input-help {
border-color:#3a7d34;
}
.ng-valid + .input-help::before {
color:#3a7d34;
}
/* Help should show and be red when invalid */
.ng-invalid + .input-help {
display: block;
border-color: #ec3f41;
}
.ng-invalid + .input-help::before {
color: #ec3f41;
}
/* Style input help requirement bullets */
.input-help ul {
list-style: none;
margin: 10px 0 0 0;
}
/* Default each bullet to be invalid with a red cross and text */
.input-help li {
padding-left: 22px;
line-height: 24px;
color:#ec3f41;
background:url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAA1CAYAAABIkmvkAAAABHNCSVQICAgIfAhkiAAAAAlwSFlzAAAAJwAAACcBKgmRTwAAABZ0RVh0Q3JlYXRpb24gVGltZQAxMC8wOS8xMlhq+BkAAAAcdEVYdFNvZnR3YXJlAEFkb2JlIEZpcmV3b3JrcyBDUzVxteM2AAAEA0lEQVRIie2WW2jbVRzHv//zT5rkn0ub61zaNdEiPqTC9EFRhtgJk63qg3Wr0806pswNiYgDUXxwyryCEB8UBevtaSCCDHQoboKyoVvVzfRmL2napU0mrdbl8s//dy4+dM1M28n64FsPnIdz+XzO75zfOXA0pRRWU7o/uS9FxOc+3/vlIQBgq4F3fHxvKuIPJ9cFwi9uTXU8BwDa1Uaw/aN7UusCkWRbPI5yxcTI2Bgy49kXrkrwwIedqYg/nGyLXwsJiYHBYWTGs7Cq5Kpt4cA3PXft+2rX40vhrt7OVLgplIzHYuBKoH9gCKMjGVE1LdfJl86YDAAOfN2ziZP4NODyv9/z2fanFuH7P9iWCjcFk/FYK4QSGLgEk0WeUy/3mQCgPXFs9xbBRW883NrssDvQN3hWcOLPEPGWiD94MBaPQymBoaERjI9mBSfu+fHwL+biItpjR3e6JFfloDeAaGQ9SpUycvlp6ExHJBKGYsDvgyMYH81KTsL90yuX4VoWdh3pMqSQpWBjAC3RZkgpYEkCFDA8NIqJ0UlFxI3Tr/5aB9elsau305BcloKBAFpjLeBSYGRwDBNjk4oTN06/dnYZXCcAgK1vbzYkl6VwOATihOzYlOLEjTOvn1sRXiYAgDsP32YIKUuWaXFOwtP3xrnqleAVBQBwy/M3GZy4+PnN3/4TvqJgNWVVj2lNsCZYE6wJ1gRrgv9dYAMAHHw2Bl2fUEpBVavtLPVW/78nVR/Zk4CupzVHA6zChSOK0yHv0S8GFyK4BMPhAJxOgLE03/9kYhE2dz+agKaldY8bDaEQ7D5ft7Roy+UIlCooy5LQdaZ5vVBEgGmmrT172yVxaIylmdcDm9cHc2oK1Zm8kETvLAo0pRRk8mmnEqKouVw68zVCzP8F/uccFHHoXi/sjT6Y53Mw83mhOHn8J7416wQAwPftd0ouiswwdJu/CRASkBKQAmYuBzNfWIC/O173W6llwfbeu6Yi8tDsrAQJYGICyGQAIWDO5KUkaxlcJwAASdSmaWAQHCACOAc4h6YzJi1qWymNNUHlwYcT0JDWXQbACYhGgeh6gHM4Ghuh2/R0YePNiaUCTSmFcvdDCY1paZvhht3nQ2VmGmahICSR5vQHmDt6DcozeZSnp2FdLLZHhwdq94SVd+xMaJqWtrkM2L1uVHILpy0t8igidymXExfHMzBCQbhCIdga7Onz8etqkdgkUYTZbYCSqORmULlQEIq4J3jyexMA8jdu9BRzuaKyLN3udkNjDEqICID+2hbm797Wwez24/T3vJTE3aFTP9Sd9vT1NziVEMUGr1c35+Y2b5jKnqgNKqWglMLspjs6/rj1dudie2mdao07J5s3dCzt/werJTyI1yYqpQAAAABJRU5ErkJggg==) no-repeat 2px -34px;
}
/* Set to green check and text when valid */
.input-help li.valid {
color:#3a7d34;
background-position: 2px 6px;
}
/* Set submit button */
form .btn, form.ng-valid .btn[disabled] {
display: none;
}
form.ng-invalid .btn[disabled], form.ng-valid .btn {
display: inline-block;
}
body {
padding: 20px 0;
}
input {
width: 166px
}
.form-horizontal .control-label {
width: 100px;
}
.form-horizontal .controls {
position: relative;
margin-left: 120px;
}
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<form ng-app="form-example" class="row form-horizontal" novalidate>
<div class="control-group">
<label class="control-label" for="inputEmail">Email</label>
<div class="controls">
<input type="email" id="inputEmail" placeholder="Email" ng-model="email" required>
<div class="input-help">
<h4>Invalid Email</h4>
</div>
</div>
</div>
<div class="control-group">
<label class="control-label" for="inputPassword">Password</label>
<div class="controls">
<input ng-model="password" class="immediate-help" password-validate required type="password" id="inputPassword" placeholder="Password">
<div class="input-help">
<h4>Password must meet the following requirements:</h4>
<ul>
<li ng-class="pwdHasLetter">At least <strong>one letter</strong></li>
<li ng-class="pwdHasNumber">At least <strong>one number</strong></li>
<li ng-class="pwdValidLength">At least <strong>8 characters long</strong></li>
</ul>
</div>
</div>
</div>
<div class="control-group">
<div class="controls">
<button type="submit" class="btn">Create Account</button>
<button class="btn" disabled>Create Account</button>
</div>
</div>
</form>