In my project i'm dynamically generating an html form using jquery. Here the page consist of five tabs each having separate previous and next buttons. The tab is designed using bootstrap. Can anyone please suggest the easiest method to validate this page. ie, when i click next button on first tab it should validate fields in first tab only and so on. Please help me to solve this issue. Many thanks in advance.
Here is my whole code:
html code:
<ul class="nav nav-tabs">
<li class="active"><a data-toggle="tab" href="#name" id="id-name">name</a></li>
<li><a data-toggle="tab" href="#address" id="id-address">address</a></li>
</ul>
<form class="form-horizontal" id="id-fn-employee" method="POST" enctype="multipart/form-data" action="${pageContext.request.contextPath}/employee/saveMe">
<div class="tab-content">
<div id="name" class="tab-pane fade in active" style="height:auto;overflow: hidden;">
<span id ="name1"></span>
<div class="form-group">
<label class="col-sm-3 control-label">First Name<a style="color: red">*</a>
<p style="font-size: 75%;" class="help-block">First Name</p>
</label>
<div class="col-xs-4">
<input type="text" placeholder="First Name" required="true" id="id-firstNmae" name="firstNmae" class="form-control">
<p style="font-size: 75%;" class="help-block"></p>
</div>
</div>
<div class="form-group">
<label class="col-sm-3 control-label">Last Name<a style="color: red">*</a>
<p style="font-size: 75%;" class="help-block">Last Name</p>
</label>
<div class="col-xs-4">
<input type="text" placeholder="Last Name" required="true" id="id-lastName" name="lastName" class="form-control">
<p style="font-size: 75%;" class="help-block"></p>
</div>
</div>
<ul class="pager">
<li>Cancel</li>
<li>Next</li>
</ul>
</div>
<div id="address" class="tab-pane fade" style="height:auto;overflow: hidden;">
<span id ="address1"></span>
<div class="form-group">
<label class="col-sm-3 control-label">house name<a style="color: red">*</a>
<p style="font-size: 75%;" class="help-block">house name</p>
</label>
<div class="col-xs-4">
<input type="text" placeholder="house name" required="true" id="id-houseName" name="houseName" class="form-control">
<p style="font-size: 75%;" class="help-block"></p>
</div>
</div>
<div class="form-group">
<label class="col-sm-3 control-label">Street<a style="color: red">*</a>
<p style="font-size: 75%;" class="help-block">Street</p>
</label>
<div class="col-xs-4">
<input type="text" placeholder="Street" required="true" id="id-street" name="street" class="form-control">
<p style="font-size: 75%;" class="help-block"></p>
</div>
</div>
<ul class="pager">
<li>Previous</li>
<li>Next</li>
</ul>
</div>
</div>
</form>
JS:
$(document).ready(function(){
var $validator = $("#id-fn-employee").validate({
errorPlacement: function (error, element) {
var placement = $(element).data('error');
if( $(element).hasClass('grp') ){
error.insertAfter($(element).parent());
}else{
if (placement) {
$(placement).append(error)
} else {
error.insertAfter(element);
}
}
}
});
});
I have included the required js files along with
<script src="${pageContext.request.contextPath}/resources/js/plugins/jquery.validate.min.js"></script>
Here we need to add the above code in js and need to specify the id of the form.
This validation is working fine in static pages but failed to validate dynamically generated form.
Let's assume you have some markup like the following for simplicity:
<ul class="tabs">
<li class="tab" id="first_tab">
<form>
/* form fields are here */
<button class="next_btn">Next</button>
</form>
</li>
</ul>
So you can listen to the click event on the Next button:
$('form .next_btn').on('click', function () {
var $btn = $(this),
$form = $btn.closest('form');
initValidator($form);
if($form.valid()){
// Go to next step
} else {
alert('Invalid form')
}
});
function initValidator($form) {
var $validator = $form.validate({
errorPlacement: function (error, element) {
var placement = $(element).data('error');
if( $(element).hasClass('grp') ){
error.insertAfter($(element).parent());
}else{
if (placement) {
$(placement).append(error)
} else {
error.insertAfter(element);
}
}
}
});
}
Problem :
This looks messy, Being this your current structure.
<form class="form-horizontal" id="id-fn-employee" method="POST" enctype="multipart/form-data" action="${pageContext.request.contextPath}/employee/saveMe">
<div class="tab-content">
<div id="name">...</div>
<div id="address">...</div>
</div>
</form>
And your script
var $validator = $("#id-fn-employee").validate({...
Since your have the form as a parent which wraps both the tab content, at any given tab you will end up in validating the entire form.
Solution:
1) Have a seperate forms for each tab, and on click of next button you can validate only that respective tab's form. So your Html should be restructured this way.
<div class="tab-content">
<div id="name"><form>...</form></div>
<div id="address"><form>...</form></div>
</div>
And when both forms are valid you can combine the data of both the forms and then submit using Jquery.
2) If you dont want to restructure your HTML then you have to manually grab only the elements in that particular tab content div and then validate them manually.
Related
Hello I am working with MEAN Stack application.When I add record data stored
Successfully. But When I don't fill any field and click add button which is
Calling function for store record My function working properly But I used the
Validation field is required but function working and redirect my given path.
new data is not storing but why function is working.
function in controller
$scope.adduser = function()
{
$http({
method:"POST",
url:'api/adduser',
data:{name:$scope.name, email:$scope.email,password:$scope.password}
}).then(function successCallback(response) {
if(response.data.error){
$scope.error = response.data.error;
}else{
$scope.Blog=response.data;
$localStorage.dd=$scope.Blog;
$location.path('/allusers');
}
//console.log(response);
}, function errorCallback(response) {
alert("data is not comming here");
});
}
message show field is required but not stay there go to the given path when
response success. how to resolved this problem
view file is
<!-- BEGIN PAGE HEADER-->
<h3 class="page-title">
Advanced Datatables <small>advanced datatable samples</small>
</h3>
<div class="page-bar">
<ul class="page-breadcrumb">
<li>
<i class="fa fa-home"></i>
Home
<i class="fa fa-angle-right"></i>
</li>
<li>
All Users
</li>
</ul>
</div>
<div class="row">
<div class="col-md-12">
<!-- BEGIN VALIDATION STATES-->
<div class="portlet box blue-hoki">
<div class="portlet-title">
<div class="caption">
<i class="fa fa-gift"></i>
New User
</div>
</div>
<div class="portlet-body form">
<form id = "expensesCreate" class="form-horizontal">
<div class="form-body">
<div class="alert alert-danger display-hide">
<button class="close" data-close="alert"></button>
You have some form errors. Please check below.
</div>
</div>
<div class="form-group">
<label for="price" class="col-sm-3">Name</label>
<div class="col-sm-4 #if($errors->has('price')) has-error #endif">
<input class="form-control input-sm" placeholder="" autocomplete="off" id="first_name" name="name" ng-model="name" type="text" value ="" required>
<p class="error"></p>
</div>
</div>
<div class="form-group">
<label for="price" class="col-sm-3">Email</label>
<div class="col-sm-4 #if($errors->has('price')) has-error #endif">
<input class="form-control input-sm" placeholder="" autocomplete="off" id="email" name="email" ng-model="email" type="text" value ="" required>
<p class="error"></p>
</div>
</div>
<div class="form-group">
<label for="Phone_no" class="col-sm-3">Password</label>
<div class="col-sm-4 #if($errors->has('Phone_no')) has-error #endif">
<input class="form-control input-sm" placeholder="" autocomplete="off" id="phone_no" name="company_name" ng-model="password" type="text" value ="" required>
<p class="error"></p>
</div>
</div>
<div class="form-actions">
<div class="row">
<div class="col-md-offset-3 col-md-9">
<button ng-click="adduser()" class="btn blue-hoki">Add</button>
<a ng-href="#/allusers">
<button type="button" class="btn default" id="cancel">Cancel</button>
</a>
</div>
</div>
</div>
</div>
</form>
<!-- END FORM-->
</div>
</div>
<!-- END VALIDATION STATES-->
</div>
</div>
<style>
.form-horizontal .form-group {
margin-right: -15px;
margin-left: 0px;
}
</style>
Add disabled attribute on your button validation while the form is invalid
<button ng-click="adduser()" class="btn blue-hoki" ng-disabled="expensesCreate.$invalid">Add</button>
When I click on my next button and it goes to step 2 and if I reload the page I would like to make sure it stays on the same div that I am on.
The 2 divs I use are join_form_1 and join_form_2
At the moment it when I reload page it goes back to first div
How can I make it stay on the div I am on?
Codepen Example Here
$(document).ready(function(){
$("#join_form_2").hide();
$("#step_1_link").addClass("active");
$("#next").click(function(){
$("#step_1_link").removeClass("active");
$("#step_2_link").addClass("active");
$("#join_form_1").hide();
$("#join_form_2").show();
});
});
HTML
<div class="container">
<div class="row">
<div class="col-lg-12 col-md-12 col-sm-12 col-xs-12">
<div class="heading-message">
<div class="text-center">
<i class="fa fa-user" aria-hidden="true"></i>
</div>
<div class="text-center">
<h1>Request A Admin Member Login</h1>
</div>
</div>
</div>
</div>
<div class="row">
<div class="col-lg-9 col-md-9 col-sm-12 col-xs-12">
<ol class="steps list-inline">
<li id="step_1_link">
Step 1: Set up a personal account
</li>
<li id="step_2_link">
Step 2: Choose profile picture
</li>
</ol>
<div id="join_form_1">
<div class="form-group">
<label>Username</label>
<input type="text" name="username" value="" class="form-control" placeholder="" />
</div>
<div class="form-group">
<label>Email</label>
<input type="text" name="email" value="" class="form-control" placeholder="" />
</div>
<div class="form-group">
<label>Password</label>
<input type="password" name="password" value="" class="form-control" placeholder="" />
</div>
<div class="form-group">
<label>Confirm Password</label>
<input type="password" name="confirm_password" class="form-control" placeholder="" />
</div>
<div class="form-group">
<button type="button" class="btn btn-default" id="next">Next</button>
</div>
</div><!-- Setup_1 -->
<div id="join_form_2">
<div class="form-group">
<label>Upload A Image</label>
<input type="file" name="userfile" size="50" />
</div>
</div><!-- Setup_1 -->
</div>
<div class="col-lg-3 col-md-3 col-sm-12 col-xs-12">
<div class="info-box">
<h2>You'll Love This Forum</h2>
</div>
</div>
</div>
</div>
You can use javascript cookie API here
So when user clicks 'Next'
Cookies.set('active', 'join_form_2');
Than if user clicked in the previous session, show form 2.
if (Cookies.get('active') == 'join_form_2') {
$("#join_form_1").hide();
$("#step_1_link").removeClass("active");
} else {
$("#join_form_2").hide();
$("#step_1_link").addClass("active");
}
Here is working codepen.
The easiest and most reliable way to do this is to use Fragment_identifier along with :target pseudo selector.
This will work even if cookies are disabled. And since you're using bootstrap, it's easy to style <a> tags like buttons.
For example:
if (!window.location.hash) {
window.location.hash = 'step1';
.steps:not(:target) {
display: none;
}
step1
step2
<div id="step1" class="steps">Step1</div>
<div id="step2" class="steps">Step2</div>
Basically I would like to have all form inputs disabled until the "Edit Profile" button is clicked, then once the "Save Changes" button is clicked, have the disabled attribute reapplied.
I have tried a bunch of solutions from this site, with no luck. Any help would be appreciated, even if it's just guiding me int he right directions.
Here is the code, which is using bootstrap and contains Django (not shown, obviously). Thanks in advance.
<div class="main">
<div class="container">
<section class="hgroup">
<h1>My Profile</h1>
<h2>View and edit your profile.</h2>
<ul class="breadcrumb pull-right">
<li>Dashboard </li>
<li class="active">Profile</li>
</ul>
</section>
<section>
<div class="row">
<div class="contact_form col-sm-12 col-md-12">
<form name="contact_form" id="contact_form" method="post">
<div class="row">
<div class="col-sm-4 col-md-4">
<label>First Name</label>
<input name="first_name" id="name" class="form-control" type="text" value="">
</div>
<div class="col-sm-4 col-md-4">
<label>Middle Name</label>
<input name="middle_name" id="email" class="form-control" type="text" value="">
</div>
<div class="col-sm-4 col-md-4">
<label>Last Name</label>
<input name="last_name" id="email" class="form-control" type="text" value="">
</div>
</div>
<div class="col-sm-12 col-md-12">
<br/>
<a id="submit_btn" class="btn btn-primary" name="submit">Edit Profile</a>
<a id="submit_btn" class="btn btn-primary" name="submit">Save Changes</a>
<!--<span id="notice" class="alert alert-warning alert-dismissable hidden" style="margin-left:20px;"></span>-->
</div>
</form>
</div>
</div>
</section>
</div>
</div>
Add some selectors to link -
Edit Profile
Save Changes
Disable all the input fields -
$('input').attr('disabled', true);
Alter the attributes of input fields -
$('#edit_profile').on('click', function(e) {
e.preventDefault();
$('input').attr('disabled', false);
});
$('#save_button').on('click', function(e) {
e.preventDefault();
$('input').attr('disabled', true);
});
Dont forget to include jquery. And e.preventDefault() for preventing the default action of the as.
Working Demo
You also have two elements that have the id submit_btn, id's should be unique.
I would change them to be different and then try:
$("#edit_btn").on('click', function() {
$("input[type='text']").removeAttr('disabled');
});
Then to re-disable:
$("#submit_btn").on('click', function() {
$("input[type='text']").attr('disabled', 'disabled');
});
You may wish to change the input[type='text'] selector if you have more inputs on the page you don't want disabled.
Maybe change your <input> elements to include the js-disable class, then target the $(".js-disable") selector instead of input[type='text']
I would use jQuery. Here's an example.
html:
<form>
<p>Edit the form</p>
<input type="text" placeholder="one" disabled>
<input type="text" placeholder="two" disabled>
<input type="text" placeholder="three" disabled>
<div id="saveForm">Save Form</div>
<div id="editForm">Edit Form</div>
</form>
jQuery:
$("#editForm").click(function(){
$("p").show(0);
$("#saveForm").show(0);
$("form input").prop('disabled', false);
$(this).hide(0);
});
$("#saveForm").click(function(){
$("p").hide(0);
$("#editForm").show(0);
$("form input").prop('disabled', true);
$(this).hide(0);
});
CSS:
div,input{
padding: 10px;
display: block;
margin: 10px;
border-radius: 5px;
border: 2px solid #000;
}
#saveForm{display: none;color:#ff0000;}
p{display:none;color:#ff0000;}
div{cursor:pointer;}
div:hover{opacity: 0.7;}
Here's a fiddle: http://jsfiddle.net/92ng2hs0/2/
I am using bootstrap tabs in my code.
I am writing my html code below:
<form method="POST" class="form-horizontal" id="userUpdateForm">
<div class="tabbable">
<div class="tab-content">
<ul class="nav nav-tabs" id="mainTabs">
<li class="active nohover">tab1</li>
<li class="nohover">tab2</li>
</ul>
<div class="tab-pane active" id="1A">
<div class="control-group">
<label class="control-label" for="title">Field1:</label>
<div class="controls">
<inpu type="text" name="field1" />
<p class="help-block"></p>
<div id="titleError"></div>
</div>
</div>
<div class="control-group">
<label class="control-label" for="title">Field2:</label>
<div class="controls">
<inpu type="text" name="field2" />
<p class="help-block"></p>
<div id="titleError"></div>
</div>
</div>
</div>
<div class="tab-pane" id="1B">
<div class="control-group">
<label class="control-label" for="title">Field3:</label>
<div class="controls">
<inpu type="text" name="field3" />
<p class="help-block"></p>
<div id="titleError"></div>
</div>
</div>
<div class="control-group">
<label class="control-label" for="title">Field4:</label>
<div class="controls">
<inpu type="text" name="field4" />
<p class="help-block"></p>
<div id="titleError"></div>
</div>
</div>
</div>
</div>
</div>
</form>
I have to validate the fields when I click on other tab,if the data is not valid it should stay in same tab.
Can any one tell me how to do that by providing sample code.
Please dont use any validation plugins,I need in javascript/jquery code to validate the data.
Just use e.preventDefault();
$("tabSelector").click(function() {
if(validation condition){
e.preventDefault();
}
});
http://api.jquery.com/event.preventDefault/
Additionally to #Baadshah answer,
You should bind this to show() event and then you have reference to active and next tab.
From the documentation:
This event fires on tab show, but before the new tab has been shown. Use event.target and event.relatedTarget to target the active tab and the previous active tab (if available) respectively.
And the code:
$('a[data-toggle="tab"]').on('show', function (e) {
e.target; // activated tab
e.relatedTarget; // previous tab
});
http://twitter.github.io/bootstrap/javascript.html#tabs
By taking the above two answer into consideration I solve my issue as the following:
var oldTab = e.relatedTarget.href; // previous tab url
var oldTabValue=oldTab.split("#");
if (oldTabValue[1] == '1A'){
var tab1flag = validateTab1();
if(tab1flag )
{
if(!flag)
{
e.target;
}
return;
}
else
{
e.relatedTarget;
e.preventDefault();
return;
}
}
I have 3 forms. I'd like to show each separately. Having the user fillout and then have the completed form slide to the left, and then revealing the proceeding form.
$('.button-action').click(function() {
$('.firstForm').animate({left: '-=150px'}, 500);
});
How would I go about making this happen?
Here is a fiddle that I've tried to work with.
Thank you for your help.
I've changed the divs to have a class called 'wizard' (because that's the way I see what you are trying to do) you can change that however you'd like.
HTML
<div class="promo">
<div class="wrapper">
<div id="signup" class="wizard">
<div class="heading">
<h1>Just need your email to get started</h1>
</div>
<ul>
<li>
<input class="signup-email" type="text" placeholder="Email address" />
</li>
<li>
<button data-next-id="form1" validationDiv="signup" class="continue button button-action">Apply</button>
</li>
</ul>
</div>
<div id="form1" class="wizard">
<h1>One more to go</h1>
<input type="text" placeholder="First Name" />
<input type="text" placeholder="Last Name" />
<input type="text" placeholder="Country" />
<button data-next-id="form2" validationDiv="form1" class="continue button button-action">One more</button>
</div>
<div id="form2" class="wizard">
<h1>Last one</h1>
<input type="text" class="input-text" placeholder="Company Name" />
<button validationDiv="form2" class="button button-action">Done</button>
</div>
</div>
</div>
jQuery
$(".wizard").hide();
$("#signup").show();
$(".continue").click(function () {
var valid = true;
$("#" + $(this).attr("validationDiv")).find("input").each(function () {
if ($(this).val() == "") valid = false;
});
if (valid) {
$(".wizard").slideUp();
$("#" + $(this).attr("data-next-id")).slideDown();
}
});
JSFiddle