My angular form refuses to validate on submit. I have multiple other forms set up similarly that work completely fine. It prevents submission if invalid, however, it does not show any error messages at all.
<div class="card card-block signup-card">
<h1>Sign Up</h1>
<form role="form" name="signupForm" ng-submit="signupForm.$valid && uploadPic(picFile)" novalidate>
<div class="form-group text-center">
<span ng-show="imageError" style="color: #c0392b; padding-bottom: 1em; font-weight: bold;">Please choose a profile picture</span>
<div class="profile-image">
<div class="profile-preview">
<img ng-show="signupForm.file.$valid" ngf-src="picFile" class="thumb">
<button ng-click="picFile = null" ng-show="picFile">Remove</button>
</div>
<input type="file" id="file" ngf-select ng-model="picFile" name="file"
accept="image/*" ngf-max-size="2MB" required
ngf-model-invalid="errorFiles" style="display:none;">
<label for="file" class="btn btn-green btn-md">Upload Picture</label>
</div>
</div>
<div class="form-group">
<label for="email">Email ending in .edu</label>
<input type="email" class="form-control" edu-email-validate ng-model="user.email" id="email" placeholder="Email must end in .edu" required="">
</div>
<div class="form-group">
<label for="fname">First Name</label>
<input type="text" class="form-control" id="fname" ng-model="user.firstName" placeholder="First Name" name="firstname" required="">
<span ng-show="signupForm.firstname.$error.required"></span>
</div>
<div class="form-group">
<label for="lastname">Last Name</label>
<input type="text" class="form-control" id="lastname" ng-model="user.lastName" placeholder="Last Name" name="lastname" required>
<span ng-show="signupForm.lastname.$error.required"></span>
</div>
<div class="form-group">
<label for="username">Username</label>
<input type="text" class="form-control" id="username" ng-model="user.username" placeholder="Username" name="username" required>
<span ng-show="signupForm.username.$error.required"></span>
</div>
<div class="form-group">
<label for="gradclass">Graduation Year</label>
<input type="number" class="form-control" min="2016" max="2024" integer id="gradclass" ng-model="user.gradClass" placeholder="Graduation Year" required>
<span ng-show="signupForm.user.gradClass.$error.integer">Not a valid graduation year!</span>
<span ng-show="signupForm.user.gradClass.$error.min || signupForm.size.$error.max"></span>
</div>
<div class="form-group">
<label for="school">School</label>
<select class="form-control" id="school" ng-model="user.schoolId" name="school" required>
<option disabled selected="selected" value="0">Choose School</option>
<option value="1">Champlain College</option>
<option value="2">UVM</option>
</select>
<span ng-show="signupForm.school.$error.required">Please select a school</span>
</div>
<div class="form-group">
<label for="password">Password</label>
<input type="password" class="form-control" id="password" ng-model="user.password" equals="{{ user.passwordCheck }}" ng-minlength= "6" placeholder="Password" name="password" required>
<span ng-show="signupForm.password.$error.required"></span>
</div>
<div class="form-group">
<label for="password-2">Password Again</label>
<input type="password" class="form-control" id="password-2" ng-model="user.passwordCheck" equals=" {{ user.password }}" ng-minlength = "6"placeholder="Password Again" name="password2" required>
<span ng-show="signupForm.password2.$error.required"></span>
</div>
<div class="login-bottom-container">
<input type="submit" class="btn btn-green btn-lg" value="Sign up" ng-click="submitted = true">
<div class="right">
<a ui-sref="terms" style="margin-top: 1em; display: block;">By signing up you agree to the terms and conditions of BlackMarket University</a>
</div>
<span class="progress" ng-show="picFile.progress >= 0">
<div style="width:{{picFile.progress}}%; background-color: #2980b9; color: #FFF; padding: 1em .5em;font-weight: 500; border-radius: 50%;" ng-bind="picFile.progress + '%'"></div>
</span>
<span ng-show="picFile.result">Upload Successful</span>
<span class="err" ng-show="errorMsg">Error making account.</span>
</div>
</form>
</div>
Any help is greatly appreciated.
Edit
This is code that is working:
<link href="css/profile.css" rel="stylesheet">
<div class="row" style="padding-top: 1em;padding-bottom: 1em;">
<div class="col-md-8 col col-xs-12">
<div class="buffer">
<div class="profile-picture" style="background-image:url({{ addRoute(currentUser.profile_picture) }}); background-size:cover;">
</div>
<div class="profile-container">
<h2 class="name-highlight">Hi, {{currentUser.firstName}} {{currentUser.lastname}}</h3>
<h4 class="name-highlight">{{ currentUser.school }} class of {{currentUser.grad_class}}</h4>
</div>
</div>
<div class="col-md-6 col-xs-12">
<h2>Update your profile</h2>
<form role="form" name="profileForm" ng-submit="profileForm.$valid && updateUser()" novalidate>
<label for="username">Username</label>
<input type="text" value="{{currentUser.username}}" name = "username" ng-model="currentUser.username" placeholder="Username" id="username" class="item-input-profile form-control" required="">
<div ng-show="profileForm.$submitted || profileForm.username.$touched">
<span ng-show="profileForm.username.$error.required" style="color: red;">Please put a username!</span>
</div>
<label for="email">Email</label>
<input type="email" value="{{ currentUser.email }}" name="email" ng-model="currentUser.email" placeholder="Email" id="email" class="item-input-profile form-control" required="">
<div ng-show="profileForm.$submitted || profileForm.email.$touched">
<span ng-show="profileForm.email.$error.required" style="color: red;">Please put an email!</span>
</div>
<label for="bio">Bio</label>
<textarea type="textarea" role="textarea" name="bio" ng-model="currentUser.bio" id="bio" class="item-input-profile form-control" placeholder="Bio"></textarea>
<input type="submit" class="btn btn-green btn-lg" value="Update Profile">
</form>
</div>
<div class="col-md-6 col-xs-12">
<h2>Update your password</h2>
<form role="form" name="passwordForm" ng-submit="passwordForm.$valid && updatePasswords()" novalidate>
<label for="oldpassword">Your old password</label>
<input type="password" placeholder="Old Password" ng-model="updatePassword.oldpassword" id="oldpassword" name="oldpassword" ng-minlength= "6" class="item-input-profile form-control" required>
<div ng-show="passwordForm.$submitted || passwordForm.oldpassword.$touched">
<span ng-show="passwordForm.oldpassword.$error.required" style="color: red;">Please put in your old password</span>
</div>
<label for="newpassword">Your new password</label>
<input type="password" placeholder="New Password" ng-model="updatePassword.newpassword" id="newpassword" ng-minlength= "6" name="newpassword" equals="{{ currentUser.passwordagain }}"class="item-input-profile form-control" required>
<div ng-show="passwordForm.$submitted || passwordForm.newpassword.$touched">
<span ng-show="passwordForm.newpassword.$error.required" style="color: red;">Please put in your new password</span>
</div>
<label for="passwordagain">Your new password again</label>
<input type="password" placeholder="New Password Again" ng-model="updatePassword.passwordagain" id="passwordagain" ng-minlength= "6" name="passwordagain" equals="{{ currentUser.newpassword }}" class="item-input-profile form-control" required>
<div ng-show="passwordForm.$submitted || passwordForm.passwordagain.$touched">
<span ng-show="passwordForm.passwordagain.$error.required" style="color: red;">Please put in your new password again</span>
</div>
<input type="submit" class="btn btn-green btn-lg" value="Change Password">
</form>
</div>
</div>
<div class="col-md-4 col-xs-12">
<h2 class="gray-header text-center" ng-if="!hasPosts">No posts to show</h2>
<div class="post-card profile-post" ng-repeat="post in currentUser.posts.posts">
<div class="item-slider">
<uib-carousel interval="myInterval" no-wrap="noWrapSlides">
<uib-slide ng-repeat="image in post.images" active="slide.active" index="slide.id">
<img ng-src="{{addRoute(image.path)}}" style="margin:auto;">
</uib-slide>
</uib-carousel>
</div>
<div class="profile-image" style="background-image:url( {{ addRoute(post.profile_picture) }} ); background-size: cover;"></div>
<div class="post-content">
<div class="top-info">
<span><div class="glyphicon glyphicon-user"> </div></span><span class="post-username">{{ post.firstname}} {{ post.lastname }}</span>
<br>
<span><div class="glyphicon glyphicon-tag"> </div></span><span class="post-username">{{ post.category}}</span>
</div>
<div class="wrap">
<h1 class="post-title">{{post.title}} - <span class="price">{{post.price}}</span></h1>
<p class="description">
{{post.content}}
</p>
</div>
<button type="button" class="btn btn-danger btn-lg btn-block" ng-click="deletePost(post.id)">Delete Post</button>
</div>
</div>
</div>
</div>
Updated answer
NOTE: Angular validation works on name attribute
<!DOCTYPE html>
<html lang="en-US" ng-app="">
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
<body>
<div class="card card-block signup-card">
<h1>Sign Up</h1>
<form role="form" name="signupForm" novalidate>
<!-- <div class="form-group text-center">
<span ng-show="imageError" style="color: #c0392b; padding-bottom: 1em; font-weight: bold;">Please choose a profile picture</span>
<div class="profile-image">
<div class="profile-preview">
<img ng-show="signupForm.file.$valid" ngf-src="picFile" class="thumb">
<button ng-click="picFile = null" ng-show="picFile">Remove</button>
</div>
<input type="file" id="file" ngf-select ng-model="picFile" name="file"
accept="image/*" ngf-max-size="2MB" required
ngf-model-invalid="errorFiles" style="display:none;">
<label for="file" class="btn btn-green btn-md">Upload Picture</label>
</div>
</div> -->
<div class="form-group" ng-class="{ 'has-error' : signupForm.email.$invalid && !signupForm.email.$pristine }">
<label for="email">Email ending in .edu</label>
<input type="email" class="form-control" edu-email-validate ng-model="user.email" id="email" placeholder="Email must end in .edu" name="email" required>
<div ng-show="signupForm.email.$touched">
<span ng-show="signupForm.email.$error.required" style="color: red;">email id not proper</span>
</div>
</div>
<div class="form-group" ng-class="{ 'has-error' : signupForm.firstname.$invalid && !signupForm.firstname.$pristine }">
<label for="fname">First Name</label>
<input type="text" class="form-control" id="fname" ng-model="user.firstName" placeholder="First Name" name="firstname" required>
<div ng-show="signupForm.firstname.$touched">
<span ng-show="signupForm.firstname.$error.required" style="color: red;" ng-cloak>Please enter first name</span>
</div>
</div>
<div class="form-group" ng-class="{ 'has-error' : signupForm.lastname.$invalid && !signupForm.lastname.$pristine }">
<label for="lastname">Last Name</label>
<input type="text" class="form-control" id="lastname" ng-model="user.lastName" placeholder="Last Name" name="lastname" required>
<div ng-show="signupForm.lastname.$touched">
<span ng-show="signupForm.lastname.$error.required" style="color: red;">last name required</span>
</div>
</div>
<div class="form-group" ng-class="{ 'has-error' : signupForm.username.$invalid && !signupForm.username.$pristine }">
<label for="username">Username</label>
<input type="text" class="form-control" id="username" ng-model="user.username" placeholder="Username" name="username" required>
<div ng-show="signupForm.username.$touched">
<span ng-show="signupForm.username.$error.required" style="color: red;">username required</span>
</div>
</div>
<div class="form-group">
<label for="gradclass">Graduation Year</label>
<input type="number" class="form-control" min="2016" max="2024" id="gradclass" name="gradclass" ng-model="user.gradClass" placeholder="Graduation Year" required>
<div ng-show="signupForm.school.$touched">
<span ng-show="signupForm.gradclass.$error.required" style="color: red;">Graduaton date required</span>
<span ng-show="signupForm.gradclass.$error.number" style="color: red;">Not valid number!</span>
<span ng-show="!signupForm.gradclass.$valid" style="color: red;">Graduation year between 2016 to 2024</span>
</div>
</div>
<div class="form-group">
<label for="school">School</label>
<select class="form-control" id="school" ng-model="user.schoolId" name="school" required>
<option disabled selected="selected" value="0">Choose School</option>
<option value="1">Champlain College</option>
<option value="2">UVM</option>
</select>
<div ng-show="signupForm.school.$touched">
<span ng-show="signupForm.school.$error.required" style="color: red;">please select a school</span>
</div>
</div>
<div class="form-group" ng-class="{ 'has-error' : signupForm.password.$invalid && !signupForm.password.$pristine }">
<label for="password">Password</label>
<input type="password" class="form-control" id="password" ng-model="user.password" equals="{{ user.passwordCheck }}" ng-minlength= "6" placeholder="Password" name="password" required>
<div ng-show="signupForm.password.$touched">
<span ng-show="signupForm.password.$error.required" style="color: red;">password required</span>
</div>
</div>
<div class="form-group" ng-class="{ 'has-error' : signupForm.password2.$invalid && !signupForm.password2.$pristine }">
<label for="password-2">Password Again</label>
<input type="password" class="form-control" id="password-2" ng-model="user.passwordCheck" equals=" {{ user.password }}" ng-minlength = "6" placeholder="Password Again" name="password2" required>
<div ng-show="signupForm.password2.$touched">
<span ng-show="signupForm.password2.$error.required" style="color: red;">confirmation required</span>
</div>
</div>
<div class="login-bottom-container">
<input type="submit" class="btn btn-green btn-lg" value="Sign up" ng-disabled="signupForm.$invalid" ng-click="submitted = true">
<!-- <button class="btn btn-green btn-lg" ng-disabled="signupForm.$invalid" ng-click="Sign up()">Sign up</button>-->
<div class="right">
<a ui-sref="terms" style="margin-top: 1em; display: block;">By signing up you agree to the terms and conditions of BlackMarket University</a>
</div>
<span class="progress" ng-show="picFile.progress >= 0">
<div style="width:{{picFile.progress}}%; background-color: #2980b9; color: #FFF; padding: 1em .5em;font-weight: 500; border-radius: 50%;" ng-bind="picFile.progress + '%'"></div>
</span>
<span ng-show="picFile.result">Upload Successful</span>
<span class="err" ng-show="errorMsg">Error making account.</span>
</div>
</form>
</div>
</body>
</html>
Angular validations work on the name attribute so try adding name instead of id to the input elements inside your form
Related
I am not able to perform client-side form validation. It's a simple check. I wanna make sure that the passwords are the same. This is the javascript code snippet that I am using for the same.
$(document).ready(function(e) {
$("#reg-form").submit(function(event)) {
let $password = $('#password');
let $confirm = $('#confirmPass');
let $error = $('#confirmError');
if ($password.val() === $confirm.val()) {
return true;
} else {
$error.text("Passwords don't match");
event.preventDefault();
}
}
})
Although, I don't think the problem is in the javascript code because I tried to style some items in the form and that didn't work either so I think it's an HTML issue. However, I can't pinpoint the issue. This is my HTML Code.
<div class="d-flex justify-content-center">
<form class="reg-form" id="reg-form" enctype="multipart/form-data" action="register.php" method="post">
<div class="form-row">
<div class="col">
<input type="text" name="firstName" id="firstName" class="form-control" value="" placeholder="First Name*" required>
</div>
<div class="col">
<input type="text" name="lastName" id="lastName" class="form-control" value="" placeholder="Last Name*" required>
</div>
</div>
<div class="form-row my-4">
<div class="col">
<input type="email" name="email" id="email" class="form-control" value="" placeholder="Email*" required>
</div>
</div>
<div class="form-row my-4">
<div class="col">
<input type="password" name="password" id="password" class="form-control" value="" placeholder="Password*" required>
</div>
</div>
<div class="form-row my-4">
<div class="col">
<input type="password" name="confirmPass" id="confirmPass" class="form-control" value="" placeholder="Confirm Password*" required>
<small id="confirmError" class="text-danger"></small>
</div>
</div>
<div class="form-check form-check-inline">
<input type="checkbox" name="agreement" class="form-check-input" value="" required>
<label for="agreement" class="form-check-label font-ubuntu text-black-50"> I agree to the Terms and Conditions*</label>
</div>
<div class="submit-btn text-center my-5">
<button type="submit" class="btn btn-warning rounded-pill text-dark px-5" name="button">Continue</button>
</div>
</form>
The following is the CSS code that I tried to work with.
#reg-form input[type="text"],
#reg-form input[type="email"] {
border-radius: unset;
border: none;
border-bottom: 1px solid var(--color-border);
font-family: var(--font-ubuntu);
font-size: 18px;
}
I found some issues with the JavaScript markup, had a few closing brackets missing and closing parentheses declared too early in the code; but your code itself looks like it works with the correct markup on the JS, please see below:
$(document).ready(function() {
$("#reg-form").submit(function(e) {
let $password = $('#password');
let $confirm = $('#confirmPass');
let $error = $('#confirmError');
if ($password.val() === $confirm.val()) {
console.log(true);
return true
} else {
e.preventDefault();
$error.text("Passwords don't match");
}
})
})
#reg-form input[type="text"],
#reg-form input[type="email"] {
border-radius: unset;
border: none;
border-bottom: 1px solid var(--color-border);
font-family: var(--font-ubuntu);
font-size: 18px;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="d-flex justify-content-center">
<form class="reg-form" id="reg-form" enctype="multipart/form-data" action="register.php" method="post">
<div class="form-row">
<div class="col">
<input type="text" name="firstName" id="firstName" class="form-control" value="" placeholder="First Name*" required>
</div>
<div class="col">
<input type="text" name="lastName" id="lastName" class="form-control" value="" placeholder="Last Name*" required>
</div>
</div>
<div class="form-row my-4">
<div class="col">
<input type="email" name="email" id="email" class="form-control" value="" placeholder="Email*" required>
</div>
</div>
<div class="form-row my-4">
<div class="col">
<input type="password" name="password" id="password" class="form-control" value="" placeholder="Password*" required>
</div>
</div>
<div class="form-row my-4">
<div class="col">
<input type="password" name="confirmPass" id="confirmPass" class="form-control" value="" placeholder="Confirm Password*" required>
<small id="confirmError" class="text-danger"></small>
</div>
</div>
<div class="form-check form-check-inline">
<input type="checkbox" name="agreement" class="form-check-input" value="" required>
<label for="agreement" class="form-check-label font-ubuntu text-black-50"> I agree to the Terms and Conditions*</label>
</div>
<div class="submit-btn text-center my-5">
<button type="submit" class="btn btn-warning rounded-pill text-dark px-5" name="button">Continue</button>
</div>
</form>
</div>
I have a form that looks like this:
I want every input to be mandatory and requires user to enter before proceeding to the next tab,by click the next button. I implemented the jquery validation plugin and it looks like below:
Code:
<form method="POST" action="{{ route('register') }}" id="register-form">
#csrf
<div class="tab-content" id="myTabContent">
<!-- Registration Tab-->
<div class="tab-pane fade show active" id="registration" role="tabpanel" aria-labelledby="registration-tab">
<h5 class="text-center" style="background-color: #303030; color: #ffffff; padding: .5rem; border: 1px solid #e5e5e5;">Account Particulars</h5>
<div class="form-row">
<div class="form-group col-md-12">
<label for="email">Email</label>
<input type="email" name="email" class="form-control" required id="email" placeholder="Email">
</div>
<div class="form-group col-md-12">
<label for="password">Password</label>
<input type="password" name="password" class="form-control" required id="password">
</div>
<div class="form-group col-md-12">
<label for="password-confirm">Confirm Password</label>
<input id="password-confirm" type="password" class="form-control" name="password_confirmation" required autocomplete="new-password">
</div>
</div>
<!-- Next Button -->
<div class="text-right">
<!-- <a class="btn btn-secondary next-button" id="information-tab" data-toggle="tab" href="#information" role="tab" aria-controls="profile" aria-selected="false">Next</a> -->
<a class="btn btn-secondary next-button" id="next-btn">Next</a>
</div>
</div>
<!-- Information Tab -->
<div class="tab-pane fade" id="information" role="tabpanel" aria-labelledby="information-tab">
<!-- Personal Particulars -->
<h5 class="text-center" style="background-color: #303030; color: #ffffff; padding: .5rem; border: 1px solid #e5e5e5;">Personal Particulars</h5>
<div class="form-row">
<div class="form-group col-md-6">
<label for="full_name">Full Name (as per NRIC)</label>
<input type="text" name="full_name" class="form-control" id="full_name" placeholder="Full Name">
</div>
<div class="form-group col-md-6">
<label for="nric">NRIC Number</label>
<input type="text" name="nric" class="form-control" id="nric" placeholder="NRIC Number">
</div>
</div>
<div class="form-row">
<div class="form-group col-md-12">
<label for="address_1">Address Line 1</label>
<input type="text" name="address_1" id="address_1" class="form-control" placeholder="Residential Address Line 1">
</div>
<div class="form-group col-md-12">
<label for="address_1">Address Line 2</label>
<input type="text" name="address_2" id="address_2" class="form-control" placeholder="Residential Address Line 1">
</div>
<div class="form-group col-md-12">
<label for="address_1">Address Line 3</label>
<input type="text" name="address_3" id="address_3" class="form-control" placeholder="Residential Address Line 1">
</div>
</div>
<div class="form-row">
<div class="form-group col-md-6">
<label for="postcode">Postcode</label>
<input type="text" name="postcode" id="postcode" class="form-control" placeholder="Postcode">
</div>
<div class="form-group col-md-6">
<label for="city">City</label>
<input type="text" name="city" id="city" class="form-control" placeholder="City">
</div>
<div class="form-group col-md-12">
<label for="state">State</label>
<select name="state" id="state" class="form-control">
<option disabled selected>Choose your state..</option>
#foreach($states as $state)
<option class="text-capitalize" value="{{ $state->id }}">{{ $state->name }}</option>
#endforeach
</select>
</div>
</div>
<div class="form-row">
<div class="form-group col-md-6">
<label for="contact_number_home">Contact Number (Home)</label>
<input type="text" name="contact_number_home" class="form-control" placeholder="Home Contact Number">
</div>
<div class="form-group col-md-6">
<label for="contact_number_mobile">Contact Number (Mobile)</label>
<input type="text" name="contact_number_mobile" class="form-control" placeholder="Mobile Contact Number">
</div>
</div>
<div class="form-row">
<div class="col-12">
<label style="display: block;" for="existing_customer_options">Are you an existing Destiny Code customer?</label>
<div class="form-check form-check-inline">
<input type="radio" class="form-check-input" name="existing_customer" value="0" checked>
<label class="form-check-label" for="existing_customer">No</label>
</div>
<div class="form-check form-check-inline">
<input type="radio" class="form-check-input" name="existing_customer" value="1">
<label class="form-check-label" for="existing_customer">Yes</label>
</div>
</div>
</div>
<!-- Next Button -->
<div class="text-right">
<!-- <a class="btn btn-secondary next-button" id="agreement-tab" data-toggle="tab" href="#agreement" role="tab" aria-controls="profile" aria-selected="false">Next</a> -->
<a class="btn btn-secondary next-button">Next</a>
</div>
</div>
<div class="tab-pane fade" id="agreement" role="tabpanel" aria-labelledby="agreement-tab">
<h5 class="text-center" style="background-color: #303030; color: #ffffff; padding: .5rem; border: 1px solid #e5e5e5;">Agreement</h5>
<!-- Registration Agreement -->
...............
<div class="row">
<div class="col-12 col-md-8 offset-md-2 pl-3 pr-3 pt-2 mb-0">
<canvas class="display-block signature-pad" style="touch-action: none;"></canvas>
<p id="signatureError" style="color: red; display: none;">Please provide your signature.</p>
<div class="p-1 text-right">
<button id="resetSignature" class="btn btn-sm" style="background-color: lightblue;">Reset</button>
<button id="saveSignature" class="btn btn-sm" style="background-color: #fbcc34;">Save</button>
</div>
<input type="hidden" name="signature" id="signatureInput">
</div>
</div>
<div class="row">
<div class="col-12 mb-0 pt-2">
<!-- Submit Button -->
<div class="text-right">
<input type="hidden" name="registrationFor" value="customer">
<button type="submit" class="bjsh-btn-gold text-right">Sign Up</button>
</div>
</div>
</div>
// Validate each input tab before moving to the next tab
$(document).ready(function() {
$("#register-form").validate({
rules: {
email: "required",
password:"required",
password_confirmation:"required"
},
messages: {
email: "Please enter an email",
password: "Please enter a password",
password_confirmation: "Please confirm your password"
}
})
$('#next-btn').on('click',function() {
$("#register-form").valid();
});
});
I checked my console and there is no error and I implemented the correct library, however I can still proceed to the next button. Why is it not working?
actually error occurs but your form is redirecting to another page so add this
event.preventDefault();
before
$("#register-form").valid();
When using jQuery effect, my div collapses a little as it is sliding and the div coming in is also collapsed a little. It will be a responsive website, so I do not think I should put a width or height. I tried one suggestion I read about using position: absolute, but it did not produce the result I wanted. Is there a way to keep the div from collapsing any? I want each div to look the same when sliding as it does when not sliding.
This fiddle shows the effect and how the divs look when sliding.
CODE:
<div class="well basicInformation">
<div class="list-group">
<a href="#" class="list-group-item active">
<h4 class="list-group-item-heading">Basic Information</h4>
</a>
</div>
<div class="row">
<div class="col-md-5">
<label for="firstname">First Name</label>
<input type="text" id="firstname" class="form-control" placeholder="First name" ng-model="firstname" required autofocus />
</div>
<div class="col-md-2">
<label for="MI">Middle Initial</label>
<input type="text" id="MI" class="form-control" ng-model="middlename" />
</div>
<div class="col-md-5">
<label for="lastname">Last Name</label>
<input type="text" id="lastname" class="form-control" placeholder="Last name" ng-model="lastname" required />
</div>
</div>
<div class="row">
<div class="col-md-12">
<label for="address">Address</label>
<input type="text" id="address" class="form-control" placeholder="Address Line 1" ng-model="address" required />
</div>
</div>
<div class="row">
<div class="col-md-12">
<label for="address2">Address 2</label>
<input type="text" id="address2" class="form-control" placeholder="Address Line 2" ng-model="address2" />
</div>
</div>
<div class="row">
<div class="col-md-3">
<label for="city">City</label>
<input type="text" id="city" class="form-control" placeholder="City" ng-model="city" />
</div>
<div class="col-md-2">
<label for="address2">Locale/State</label>
<input type="text" id="locale" class="form-control" placeholder="Locale/State" ng-model="locale" />
</div>
<div class="col-md-2">
<label for="address2">Region</label>
<input type="text" id="region" class="form-control" placeholder="Region" ng-model="region" />
</div>
<div class="col-md-3">
<label for="address2">Country</label>
<input type="text" id="country" class="form-control" placeholder="Country" ng-model="country" />
</div>
<div class="col-md-2">
<label for="address2">Postal Code</label>
<input type="text" id="postalCode" class="form-control" placeholder="Postal Code" ng-model="postalCode" />
</div>
</div>
<div class="row">
<div class="col-md-6">
<label for="phone">Phone (Default)</label>
<input type="radio" id="radioHome1" /><label> Home</label>
<input type="radio" id="radioMobile1" /><label> Mobile</label>
<input type="tel" id="phone" class="form-control" placeholder="Phone" ng-model="contactData" required />
</div>
<div class="col-md-6">
<label for="phone2">Phone 2 (Alternate)</label>
<input type="radio" id="radioHome2" /><label> Home</label>
<input type="radio" id="radioMobile2" /><label> Mobile</label>
<input type="tel" id="phone2" class="form-control" placeholder="Phone 2" ng-model="contactData2" />
</div>
</div>
<div class="row">
<div class="col-md-6">
<label for="email">Email address</label>
<input type="email" id="email" class="form-control" placeholder="Email address" ng-model="emailAddress" required />
</div>
<div class="col-md-6">
<label for="password">Password</label>
<input type="password" id="password" class="form-control" placeholder="Password" ng-model="password" required />
</div>
</div>
<div class="row">
<div class="col-md-offset-10 col-md-2">
<button id="submitBasicInformation" class="btn btn-lg btn-primary btn-block">Next</button>
</div>
</div>
</div>
<div class="well faaInformation" style="display: none;">
<div class="list-group">
<a href="#" class="list-group-item active">
<h4 class="list-group-item-heading">FAA Required Information</h4>
</a>
</div>
<div class="row">
<div class="col-md-6">
<label for="federalRegistrationId">Federal Registration ID</label>
<input type="text" id="federalRegistrationId" class="form-control" placeholder="Federal Registration ID" ng-model="federalRegistrationId" required />
</div>
<div class="col-md-6">
<label for="pilotNumber">Pilot Number</label>
<input type="text" id="pilotNumber" class="form-control" ng-model="pilotNumber" required />
</div>
</div>
<div class="row">
<div class="col-md-offset-10 col-md-2">
<button id="submitRegistration" class="btn btn-lg btn-primary btn-block" type="submit">Submit</button>
</div>
</div>
</div>
var hideoptions = { "direction": "left", "mode": "hide" };
var showoptions = { "direction": "right", "mode": "show" };
$("#submitBasicInformation").on('click', function () {
$.when($(".basicInformation").effect("slide", hideoptions, 1250)).then(function (data, textStatus, jqXHR) {
$(".faaInformation").effect("slide", showoptions, 1250);
});
});
It looks like your animation is adding style attributes during the animation. You can see this if you slow down the animation and inspect the element. It's adding a static height and width during the animation. I was able to fix the height and width by adding this to your .faaInformation css
height: auto !important;
width: auto !important;
In the sample below I add some sample file, which is working fine but I need to do some modification on that. Currently while validating, it shows the error like this:
But what I need it to do is to show a tooltip. The tooltip needs to be auto pop and remain visible until the error is cleared. Like this:
$('#myForm').validator()
<script src="https://code.jquery.com/jquery-1.10.2.min.js"></script>
<script src="https://1000hz.github.io/bootstrap-validator/dist/validator.min.js"></script>
<link href="https://netdna.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet"/>
<form data-toggle="validator" role="form">
<div class="form-group">
<label for="inputName" class="control-label">Name</label>
<input type="text" class="form-control" id="inputName" placeholder="Cina Saffary" required>
</div>
<div class="form-group has-feedback">
<label for="inputTwitter" class="control-label">Twitter</label>
<div class="input-group">
<span class="input-group-addon">#</span>
<input type="text" pattern="^[_A-z0-9]{1,}$" maxlength="15" class="form-control" id="inputTwitter" placeholder="1000hz" required>
</div>
<span class="glyphicon form-control-feedback" aria-hidden="true"></span>
<span class="help-block with-errors">Hey look, this one has feedback icons!</span>
</div>
<div class="form-group">
<label for="inputEmail" class="control-label">Email</label>
<input type="email" class="form-control" id="inputEmail" placeholder="Email" data-error="Bruh, that email address is invalid" required>
<div class="help-block with-errors"></div>
</div>
<div class="form-group">
<label for="inputPassword" class="control-label">Password</label>
<div class="form-group col-sm-6">
<input type="password" data-minlength="6" class="form-control" id="inputPassword" placeholder="Password" required>
<span class="help-block">Minimum of 6 characters</span>
</div>
<div class="form-group col-sm-6">
<input type="password" class="form-control" id="inputPasswordConfirm" data-match="#inputPassword" data-match-error="Whoops, these don't match" placeholder="Confirm" required>
<div class="help-block with-errors"></div>
</div>
</div>
</div>
<div class="form-group">
<div class="radio">
<label>
<input type="radio" name="underwear" required>
Boxers
</label>
</div>
<div class="radio">
<label>
<input type="radio" name="underwear" required>
Briefs
</label>
</div>
</div>
<div class="form-group">
<div class="checkbox">
<label>
<input type="checkbox" id="terms" data-error="Before you wreck yourself" required>
Check yourself
</label>
<div class="help-block with-errors"></div>
</div>
</div>
<div class="form-group">
<button type="submit" class="btn btn-primary">Submit</button>
</div>
</form>
Many ways of doing this.
With pure CSS, leaving the DOM structure alone:
span.help-block.with-errors {
position: absolute;
top:45%;
right:36px;
z-index:1000;
}
Or, if you modify the DOM structure (moving the validation text into the .form-group):
<div class="form-group has-feedback">
<label for="inputTwitter" class="control-label">Twitter</label>
<div class="input-group">
<span class="input-group-addon">#</span>
<input type="text" pattern="^[_A-z0-9]{1,}$" maxlength="15" class="form-control" id="inputTwitter" placeholder="1000hz" required>
<span style="position:absolute;top:2px;right:36px;z-index:1000;" class="help-block with-errors">Hey look, this one has feedback icons!</span>
</div>
<span class="glyphicon form-control-feedback" aria-hidden="true"></span>
</div>
You could inline a bit of CSS to get the position correct. Stack snippet follows.
If you want to do the tooltip-style thing, I'd suggest a jQuery plugin to handle this bit for you. One example is Tooltipster.
$('#myForm').validator()
<script src="https://code.jquery.com/jquery-1.10.2.min.js"></script>
<script src="https://1000hz.github.io/bootstrap-validator/dist/validator.min.js"></script>
<link href="https://netdna.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet"/>
<form data-toggle="validator" role="form">
<div class="form-group">
<label for="inputName" class="control-label">Name</label>
<input type="text" class="form-control" id="inputName" placeholder="Cina Saffary" required>
</div>
<div class="form-group has-feedback">
<label for="inputTwitter" class="control-label">Twitter</label>
<div class="input-group">
<span class="input-group-addon">#</span>
<input type="text" pattern="^[_A-z0-9]{1,}$" maxlength="15" class="form-control" id="inputTwitter" placeholder="1000hz" required>
<span style="position:absolute;top:2px;right:36px;z-index:1000;" class="help-block with-errors">Hey look, this one has feedback icons!</span>
</div>
<span class="glyphicon form-control-feedback" aria-hidden="true"></span>
</div>
<div class="form-group">
<label for="inputEmail" class="control-label">Email</label>
<input type="email" class="form-control" id="inputEmail" placeholder="Email" data-error="Bruh, that email address is invalid" required>
<div class="help-block with-errors"></div>
</div>
<div class="form-group">
<label for="inputPassword" class="control-label">Password</label>
<div class="form-group col-sm-6">
<input type="password" data-minlength="6" class="form-control" id="inputPassword" placeholder="Password" required>
<span class="help-block">Minimum of 6 characters</span>
</div>
<div class="form-group col-sm-6">
<input type="password" class="form-control" id="inputPasswordConfirm" data-match="#inputPassword" data-match-error="Whoops, these don't match" placeholder="Confirm" required>
<div class="help-block with-errors"></div>
</div>
</div>
</div>
<div class="form-group">
<div class="radio">
<label>
<input type="radio" name="underwear" required>
Boxers
</label>
</div>
<div class="radio">
<label>
<input type="radio" name="underwear" required>
Briefs
</label>
</div>
</div>
<div class="form-group">
<div class="checkbox">
<label>
<input type="checkbox" id="terms" data-error="Before you wreck yourself" required>
Check yourself
</label>
<div class="help-block with-errors"></div>
</div>
</div>
<div class="form-group">
<button type="submit" class="btn btn-primary">Submit</button>
</div>
</form>
I'm trying to add a submit button beside my select option drop down menu. I can't seem to get to align properly above the message box.
It sits in a basic div but didn't think it was needed.
<form id="contact-form">
<div class="row">
<div class="col-md-6">
<div class="form-group">
<h5>Join us now</h5>
<div class="form-group">
<label for="subject">
Select Option</label>
<select id="subject" name="subject" class="form-control" required="required">
<option value="na" selected="">Choose One:</option>
<option value="service">Nutritional Support</option>
<option value="suggestions">Nutritional Support and Exercise Pescription</option>
<option value="product">Single Nutrition or Exercise Plan</option>
</select>
</div>
<label for="name">
Name</label>
<input type="text" class="form-control" id="name" placeholder="Enter name" required="required" />
</div>
<div class="form-group">
<label for="email">
Email Address</label>
<div class="input-group">
<span class="input-group-addon"><span class="glyphicon glyphicon-envelope"></span>
</span>
<input type="email" class="form-control" id="email" placeholder="Enter email" required="required" /></div>
</div>
</div>
<div class="col-md-6">
<div class="form-group">
<label for="name">
Message</label>
<textarea name="message" id="message" class="form-control" rows="9" cols="25" required="required"
placeholder="Message"></textarea>
</div>
</div>
<div class="col-md-12">
<button type="submit" class="btn btn-skin pull-right" id="btnContactUs">
Send Message</button>
</div>
</div>
</form>
I modified the rows and columns in your code, you can find it in this JSFiddle , hope this helps.
<form id="contact-form">
<div class="row">
<div class="col-md-6 col-xs-6">
<h5>Join us now</h5>
<div class="row">
<div class="col-md-6 col-xs-6">
<div class="form-group">
<label for="subject">
Select Option
</label>
<select id="subject" name="subject" class="form-control" required="required">
<option value="na" selected="">Choose One:</option>
<option value="service">Nutritional Support</option>
<option value="suggestions">Nutritional Support and Exercise Pescription</option>
<option value="product">Single Nutrition or Exercise Plan</option>
</select>
</div>
</div>
<div class="col-md-6 col-xs-6">
<div class="form-group">
<button type="submit" class="btn btn-skin pull-right buttonTest" id="btnContactUs">
Send Message
</button>
</div>
</div>
</div>
<div class="row">
<div class="col-md-6 col-xs-6">
<div class="form-group">
<label for="name">
Name
</label>
<input type="text" class="form-control" id="name" placeholder="Enter name" required="required" />
</div>
<div class="form-group">
<label for="email">
Email Address
</label>
<div class="input-group">
<span class="input-group-addon">
<span class="glyphicon glyphicon-envelope"></span>
</span>
<input type="email" class="form-control" id="email" placeholder="Enter email" required="required" />
</div>
</div>
</div>
<div class="col-md-6 col-xs-6">
<div class="form-group">
<label for="name">
Message
</label>
<textarea name="message" id="message" class="form-control" rows="9" cols="25" required="required"
placeholder="Message"></textarea>
</div>
</div>
</div>
</div>
</div>