I am trying to remove the ajax requested model when I user either hits close or cancel. I have tried the following.
<button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
full code
<div id="registerModal" class="modal show" tabindex="-1" role="dialog" aria-hidden="true">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header"><button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
<h1 class="text-center">Sign Up</h1>
</div>
<div class="modal-body">
<form name="register" id="register" action="login" method="post" class="col-md-12 center-block">
<div class="row">
<div class="col-md-6">
<h4 class="text-center">Business Info</h4>
<div class="form-group">
<input type="text" name="businessname" class="form-control input-lg login" placeholder="Business Name">
</div>
<div class="form-group">
<input type="text" name="abnacn" class="form-control input-lg login" placeholder="ABN or ACN" >
</div>
<div class="form-group">
<input type="phone" name="phonenumber" class="form-control input-lg login" placeholder="Main Phone Number" >
</div>
<div class="form-group">
<input type="email" name="busiussemail" class="form-control input-lg login" placeholder="Main Email Address" >
</div>
<div class="form-group">
<input type="checkbox" name="TOS" >
<br>By registering and ticking this box for My Staff, you are agreeing to our TOS and Privacy Policy.
</div>
<!--<div class="form-group">
<select name="buildingtype" class="form-control select-lg">
<option value="0">--- none ---</option>
<option value="1">Unit</option>
<option value="2">Floor</option>
</select>
</div>
<div class="form-group">
<input type="unitnumber" name="number" class="form-control input-lg login" placeholder="Unit / Floow Number">
<input type="streetno" name="number" class="form-control input-lg login" placeholder="street number">
</div>
<div class="form-group">
<input type="text" name="streetname" class="form-control input-lg login" placeholder="Street Name">
</div>
<div class="form-group">
<input type="number" name="postcode" class="form-control input-lg login" onkeyup="getLocation()" placeholder="postcode">
</div>
<div class="form-group">
<input type="text" name="postcode" class="form-control input-lg login" placeholder="state" readonly>
</div>
<div class="form-group">
<input type="text" name="postcode" class="form-control input-lg login" placeholder="Country" readonly>
</div>-->
</div>
<div class="col-md-6">
<h4 class="text-center">User login set up</h4>
<div class="form-group">
<input type="text" name="emailadress" class="form-control input-lg login" placeholder="Admin staff Email Address">
</div>
<div class="form-group">
<input type="password" name="password" class="form-control input-lg login" placeholder="Password">
</div>
<div class="form-group">
<input type="text" name="passwordtwo" class="form-control input-lg login" placeholder="Password Repeat">
</div>
<div class="form-group">
<input type="text" name="firstname" class="form-control input-lg login" placeholder="First Name">
</div>
<div class="form-group">
<input type="text" name="sirname" class="form-control input-lg login" placeholder="Last Name">
</div>
<div class="form-group">
</div>
</div>
<button typpe="submit" onclick="signupmore();" class="btn btn-success col-md-12 btn-lg btn-block">Register</button>
</form>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>
You're manually adding the class 'show' to the modal.
If you remove that, then open the modal in JS you can close it.
http://www.bootply.com/EMWW2UWBtr
$('#registerModal').modal('show');
<div id="registerModal" class="modal" tabindex="-1" role="dialog" aria-hidden="true">
Related
When a button is clicked, I am using AJAX to display a PHP modal, with a form inside it. It is an edit form so the fields are filled in with data received from AJAX calling a PHP function via a handler. However I need a way for a select input to know which one is selected but, the data to use for that is in JavaScript. Usually I would use a function such as
$occasionTypes = getPublishedOccasionTypes($connection);
if($occasionTypes != NULL){
foreach ($occasionTypes as $occasionType) {
$selected = (isset($booking['reservation_type']) && ($booking['reservation_type'] == $occasionType['id'])) ? 'selected' : NULL;
$occasionSelect .= '<option value='.$occasionType['id'].' '.$selected.'>'.$occasionType['name'].'</option>';
}
}
But in this case, $booking['reservation_type] is useless because the actual value I need is in an input (a hidden one I created) but being filled by JavaScript. Anyone any ideas? Here is my JavaScript also
$.ajax({
type: 'POST',
url: "/modules/ajax/ajax_handler.php",
data: data
})
.done((result)=>{
result = JSON.parse(result);
console.log(result);
$('#firstName').val(result.customer_first_name);
$('#lastName').val(result.customer_last_name);
$('#email').val(result.customer_email);
$('#number').val(result.customer_mobile);
$('#date').val(result.reservation_date);
$('#time').val(result.reservation_time);
$('#size').val(result.party_size);
$('#occasion').val(result.occasion_type);
$('#comment').val(result.special_requirements);
$('#code').val(pcode);
$('#customerCode').val(result.customer_code);
$('#editModal').modal('show');
})
MODAL
$modalpopup =
'
<div class="modal fade" id="editModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<h4 class="modal-title">Edit Booking</h4>
<button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">×</span></button>
</div>
<form id="editBooking" class="form form-horizontal" method="post" enctype="multipart/form-data">
<div class="modal-body">
<div class="form-group">
<label>First Name</label>
<input type="text" class="form-control" name="firstName" id="firstName" placeholder="" required>
</div>
<div class="form-group">
<label>Last Name</label>
<input type="text" class="form-control" name="lastName" id="lastName" placeholder="" required>
</div>
<div class="form-group">
<label>Email</label>
<input type="email" class="form-control" name="email" id="email" placeholder="" required>
</div>
<div class="form-group">
<label>Phone Number</label>
<input type="text" class="form-control" name="number" id="number" placeholder="" required>
</div>
<div class="form-group">
<label>Date</label>
<input type="date" class="form-control" name="date" id="date" placeholder="" required>
</div>
<div class="form-group">
<label>Time</label>
<select id="time" name="time" class="form-control" required>
<option value="">Please select ...</option>
'.$timeSelect.'
</select>
</div>
<div class="form-group">
<label>Party Size</label>
<input type="number" class="form-control" name="size" id="size" placeholder="" required>
</div>
<div class="form-group">
<label>Occasion</label>
<select id="occasion" name="occasion" class="form-control" required>
<option value="" selected>Please select</option>
'.$occasionSelect.'
</select>
</div>
<div class="form-group">
<label>Status</label>
<select class="form-control" name="status" id="status" placeholder="">
<option value="accepted">Accepted</option>
<option value="not-accepted">Not Accepted</option>
</select>
</div>
<div class="form-group">
<label>Comment</label>
<textarea type="text" class="form-control" name="comment" id="comment" placeholder=""></textarea>
</div>
<input type="hidden" class="form-control" name="code" id="code" placeholder="">
<input type="hidden" class="form-control" name="customerCode" id="customerCode" placeholder="">
</div>
<div class="modal-footer">
<button type="submit" class="btn btn-primary">Edit</button>
<button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
</div>
</form>
</div>
</div>
</div>';
I'm beginner for the Angular and try to create Angular 5 ,when i click the radio button show and hide div area.
,I created customer-1 and customer-2 radio button when i click the customer-2 radio button is it not working (shown 1st div),That one is normal html to working fine, but it's not work for angular 5 ,
anyone know how to put that one correctly in Angular5?
Thanks
html
<div class="modal fade cust-my-modal cust-my-modal-2" id="signup_modal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">×</span></button>
<h4 class="modal-title" id="myModalLabel">SIGN UP</h4>
</div>
<div class="modal-body">
<div class="row">
<div class="col-sm-12">
<div class="top-radio">
<div class="radio radio-primary">
<input type="radio" name="radio1" id="radio1" onClick="changediv('nc_signup')" checked="checked" value="option1">
<label for="radio1">
customers-1
</label>
</div>
<div class="radio radio-primary">
<input type="radio" name="radio1" id="radio2" onClick="changediv('cc_signup')" value="option2">
<label for="radio2">
customers-2
</label>
</div>
</div>
<form class="fotm" id="cc_signup" style="display: none;" action="rfq.html">
<div class="frm-btm-mrg">
<div class="form-group">
<input class="form-control" placeholder="Email id" type="text">
</div>
<div class="form-group">
<input class="form-control" placeholder="Password" type="password">
</div>
<div class="form-group">
<input class="form-control" placeholder="Re-enter password" type="password">
</div>
<div class="form-group">
<input class="form-control" placeholder="Company name" type="text">
</div>
<div class="form-group">
<input class="form-control" placeholder="Website" type="text">
</div>
<div class="form-group">
<input class="form-control contact-num" placeholder="Contact number" type="text">
</div>
<div class="checkbox">
<input id="checkbox2" type="checkbox">
<label for="checkbox2">
I agree terms & conditions
</label>
</div>
</div>
<button type="submit" class="btn">Sign up</button>
</form>
<form class="fotm" id="nc_signup" action="rfq.html">
<div class="frm-btm-mrg-2">
<div class="form-group">
<input class="form-control" placeholder="User name" type="text">
</div>
<div class="form-group">
<input class="form-control" placeholder="Email id" type="text">
</div>
<div class="form-group">
<input class="form-control" placeholder="Password" type="password">
</div>
<div class="form-group">
<input class="form-control" placeholder="Re-enter password" type="password">
</div>
<div class="checkbox">
<input id="checkbox3" type="checkbox">
<label for="checkbox3">
I agree terms & conditions
</label>
</div>
</div>
<button type="submit" class="btn">Sign ups</button>
</form>
</div>
</div>
</div>
</div>
</div>
</div>
Live code- stackblitz
javascript
<script>
function changediv(divid){
$("#nc_signup").hide();
$("#cc_signup").hide();
$("#"+ divid).show();
}
</script>
function changediv(divid)
{
$("#nc_signup").hide();
$("#cc_signup").hide();
$("#"+ divid).show();
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js"></script>
<div class="modal fade cust-my-modal cust-my-modal-2" id="signup_modal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">×</span></button>
<h4 class="modal-title" id="myModalLabel">SIGN UP</h4>
</div>
<div class="modal-body">
<div class="row">
<div class="col-sm-12">
<div class="top-radio">
<div class="radio radio-primary">
<input type="radio" name="radio1" id="radio1" onClick="changediv('nc_signup')" checked="checked" value="option1">
<label for="radio1">
customers-1
</label>
</div>
<div class="radio radio-primary">
<input type="radio" name="radio1" id="radio2" onClick="changediv('cc_signup')" value="option2">
<label for="radio2">
customers-2
</label>
</div>
</div>
<form class="fotm" id="cc_signup" style="display: none;" action="rfq.html">
<div class="frm-btm-mrg">
<div class="form-group">
<input class="form-control" placeholder="Email id" type="text">
</div>
<div class="form-group">
<input class="form-control" placeholder="Password" type="password">
</div>
<div class="form-group">
<input class="form-control" placeholder="Re-enter password" type="password">
</div>
<div class="form-group">
<input class="form-control" placeholder="Company name" type="text">
</div>
<div class="form-group">
<input class="form-control" placeholder="Website" type="text">
</div>
<div class="form-group">
<input class="form-control contact-num" placeholder="Contact number" type="text">
</div>
<div class="checkbox">
<input id="checkbox2" type="checkbox">
<label for="checkbox2">
I agree terms & conditions
</label>
</div>
</div>
<button type="submit" class="btn">Sign up</button>
</form>
<form class="fotm" id="nc_signup" action="rfq.html">
<div class="frm-btm-mrg-2">
<div class="form-group">
<input class="form-control" placeholder="User name" type="text">
</div>
<div class="form-group">
<input class="form-control" placeholder="Email id" type="text">
</div>
<div class="form-group">
<input class="form-control" placeholder="Password" type="password">
</div>
<div class="form-group">
<input class="form-control" placeholder="Re-enter password" type="password">
</div>
<div class="checkbox">
<input id="checkbox3" type="checkbox">
<label for="checkbox3">
I agree terms & conditions
</label>
</div>
</div>
<button type="submit" class="btn">Sign ups</button>
</form>
</div>
</div>
</div>
</div>
</div>
</div>
The Angular way to do this is to put code in app.component.ts instead of in a script-tag with jquery selectors.
You should have two member variables in your class that are changed by a method in the component.ts-fil, and bind to that method by using (click) in the HTML. To bind to variables in the code, use the [attr]-syntax.
You can take a look at my fork of your code here https://stackblitz.com/edit/angular-ktt3ri
My Html Code
<div class="col-md-6" id="buyerblock">
<div class="form-inline buyerdiv">
<div class="form-group">
<input class="form-control" name="buyername1" id="buyername1" style="margin-bottom: 3px;margin-right : 5px" value="" placeholder="Enter Buyer Name" type="text">
<input class="form-control" name="buyeremail1" id="buyeremail1" style="margin-bottom: 3px" value="" placeholder="Enter Buyer Email" type="email">
<button type="button" id="removebuyerbtn" class="btn btn-danger removebutton" style="margin-left: 19px;">-</button>
</div>
</div>
<div class="form-inline buyerdiv">
<div class="form-group">
<input class="form-control" name="buyername2" id="buyername2" style="margin-bottom: 3px;margin-right : 9px" value="" placeholder="Enter Buyer Name" type="text"><input class="form-control" name="buyeremail2" id="buyeremail2" style="margin-bottom: 3px" value="" placeholder="Enter Buyer Email" type="email">
<button type="button" id="removebuyerbtn" class="btn btn-danger removebutton" style="margin-left: 19px;">-</button></div></div>
<div class="form-inline buyerdiv">
<div class="form-group">
<input class="form-control" name="buyername3" id="buyername3" style="margin-bottom: 3px;margin-right : 9px" value="" placeholder="Enter Buyer Name" type="text">
<input class="form-control" name="buyeremail3" id="buyeremail3" style="margin-bottom: 3px" value="" placeholder="Enter Buyer Email" type="email">
<button type="button" id="addbuyerbtn" class="btn btn-primary addbutton" style="margin-left: 19px;">+</button>
<button type="button" id="removebuyerbtn" class="btn btn-danger removebutton" style="margin-left: 19px;">-</button>
</div>
</div>
</div>
My JS code
var check = $("div.buyerdiv").last().$(".form-group").children().length;
alert(check);
I want to get the count of child elements of form-group class under last buyerdiv class. How can i achieve it ?
Any help is much appreciated...
Use find()
var check = $("div.buyerdiv").last().find(".form-group").children().length;
alert(check);
Instead of $ use find()
var check = $("div.buyerdiv").last().find(".form-group").children().length;
console.log(check);
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>
<div class="col-md-6" id="buyerblock">
<div class="form-inline buyerdiv">
<div class="form-group">
<input class="form-control" name="buyername1" id="buyername1" style="margin-bottom: 3px;margin-right : 5px" value="" placeholder="Enter Buyer Name" type="text">
<input class="form-control" name="buyeremail1" id="buyeremail1" style="margin-bottom: 3px" value="" placeholder="Enter Buyer Email" type="email">
<button type="button" id="removebuyerbtn" class="btn btn-danger removebutton" style="margin-left: 19px;">-</button>
</div>
</div>
<div class="form-inline buyerdiv">
<div class="form-group">
<input class="form-control" name="buyername2" id="buyername2" style="margin-bottom: 3px;margin-right : 9px" value="" placeholder="Enter Buyer Name" type="text"><input class="form-control" name="buyeremail2" id="buyeremail2" style="margin-bottom: 3px" value="" placeholder="Enter Buyer Email" type="email">
<button type="button" id="removebuyerbtn" class="btn btn-danger removebutton" style="margin-left: 19px;">-</button></div></div>
<div class="form-inline buyerdiv">
<div class="form-group">
<input class="form-control" name="buyername3" id="buyername3" style="margin-bottom: 3px;margin-right : 9px" value="" placeholder="Enter Buyer Name" type="text">
<input class="form-control" name="buyeremail3" id="buyeremail3" style="margin-bottom: 3px" value="" placeholder="Enter Buyer Email" type="email">
<button type="button" id="addbuyerbtn" class="btn btn-primary addbutton" style="margin-left: 19px;">+</button>
<button type="button" id="removebuyerbtn" class="btn btn-danger removebutton" style="margin-left: 19px;">-</button>
</div>
</div>
</div>
Here is an example on fiddle with find().
var count = $('#buyerblock').find('.form-group').size();
alert(count);
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="col-md-6" id="buyerblock">
<div class="form-inline buyerdiv">
<div class="form-group">
<input class="form-control" name="buyername1" id="buyername1" style="margin-bottom: 3px;margin-right : 5px" value="" placeholder="Enter Buyer Name" type="text">
<input class="form-control" name="buyeremail1" id="buyeremail1" style="margin-bottom: 3px" value="" placeholder="Enter Buyer Email" type="email">
<button type="button" id="removebuyerbtn" class="btn btn-danger removebutton" style="margin-left: 19px;">-</button>
</div>
</div>
<div class="form-inline buyerdiv">
<div class="form-group">
<input class="form-control" name="buyername2" id="buyername2" style="margin-bottom: 3px;margin-right : 9px" value="" placeholder="Enter Buyer Name" type="text"><input class="form-control" name="buyeremail2" id="buyeremail2" style="margin-bottom: 3px" value="" placeholder="Enter Buyer Email" type="email">
<button type="button" id="removebuyerbtn" class="btn btn-danger removebutton" style="margin-left: 19px;">-</button></div></div>
<div class="form-inline buyerdiv">
<div class="form-group">
<input class="form-control" name="buyername3" id="buyername3" style="margin-bottom: 3px;margin-right : 9px" value="" placeholder="Enter Buyer Name" type="text">
<input class="form-control" name="buyeremail3" id="buyeremail3" style="margin-bottom: 3px" value="" placeholder="Enter Buyer Email" type="email">
<button type="button" id="addbuyerbtn" class="btn btn-primary addbutton" style="margin-left: 19px;">+</button>
<button type="button" id="removebuyerbtn" class="btn btn-danger removebutton" style="margin-left: 19px;">-</button>
</div>
</div>
</div>
Please try following code, just use following line
$("div.buyerdiv").last().find(".form-group").children().length;
var check = $("div.buyerdiv").last().find(".form-group").children().length;
alert(check);
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="col-md-6" id="buyerblock">
<div class="form-inline buyerdiv">
<div class="form-group">
<input class="form-control" name="buyername1" id="buyername1" style="margin-bottom: 3px;margin-right : 5px" value="" placeholder="Enter Buyer Name" type="text">
<input class="form-control" name="buyeremail1" id="buyeremail1" style="margin-bottom: 3px" value="" placeholder="Enter Buyer Email" type="email">
<button type="button" id="removebuyerbtn" class="btn btn-danger removebutton" style="margin-left: 19px;">-</button>
</div>
</div>
<div class="form-inline buyerdiv">
<div class="form-group">
<input class="form-control" name="buyername2" id="buyername2" style="margin-bottom: 3px;margin-right : 9px" value="" placeholder="Enter Buyer Name" type="text"><input class="form-control" name="buyeremail2" id="buyeremail2" style="margin-bottom: 3px" value="" placeholder="Enter Buyer Email" type="email">
<button type="button" id="removebuyerbtn" class="btn btn-danger removebutton" style="margin-left: 19px;">-</button></div></div>
<div class="form-inline buyerdiv">
<div class="form-group">
<input class="form-control" name="buyername3" id="buyername3" style="margin-bottom: 3px;margin-right : 9px" value="" placeholder="Enter Buyer Name" type="text">
<input class="form-control" name="buyeremail3" id="buyeremail3" style="margin-bottom: 3px" value="" placeholder="Enter Buyer Email" type="email">
<button type="button" id="addbuyerbtn" class="btn btn-primary addbutton" style="margin-left: 19px;">+</button>
<button type="button" id="removebuyerbtn" class="btn btn-danger removebutton" style="margin-left: 19px;">-</button>
</div>
</div>
</div>
You have small mistake.
just use find() Instead of $
var check = $("div.buyerdiv").last().find(".form-group").children().length;
alert(check);
I'm using angular UI buttons to make users select search criteria when user select buttons Patient or id it will show searchByText div if select date it will hide searchByText and show SearchBydateRange. my problem my is the angular show and hide is not working. and I use this codepen as example
http://codepen.io/SusanneLundblad/pen/iBhoJ
<div class="panel-body">
<form role="form">
<div class="col-md-7">
<div id="searchByText" class="form-group form-group-search" ng-hide=" searchOption == 'date'">
<label class="sr-only" for="search">Enter Search</label>
<input type="text" class="form-control" id="search" placeholder="Enter {{searchOption}} ..." data-ng-model="searchText">
</div>
<div id="SearchBydateRange" class="form-group form-group-search col-md-4" data-ng-show=" searchOption == 'date' ">
<label class=" sr-only" for="search">
Enter Search
</label>
<input type="text" class="form-control col-md-2" id="search" placeholder="From Date" data-ng-model="fromDate">
<input type="text" class="form-control col-md-2" id="search" placeholder="To Date" data-ng-model="toDate">
</div>
</div>
<div class="col-md-4 text-center">
<div class="btn-group btn-group-sm" data-ng-hide="userIsManager">
<label class="btn btn-searchsel" ng-model="searchOption" btn-radio="'patient'">Patient</label>
<label class="btn btn-searchsel" ng-model="searchOption" btn-radio="'id'">ID</label>
<label class="btn btn-searchsel" ng-model="searchOption" btn-radio="'Date'" va>Date</label>
</div>
</div>
<div class="col-md-1">
<button type="submit" class="btn btn-sm btn-info btn-search full-width" data-ng-click="doSearch()">Search</button>
</div>
</form>
</div>
Change the button part to this: (label or radio does not matter, but the important part is ng-click)
<div class="col-md-4 text-center">
<div class="btn-group btn-group-sm" data-ng-hide="userIsManager">
<input type="radio" ng-model="searchOption" value="patient" ng-click="searchOption = 'patient'">Patient</label>
<input type="radio" ng-model="searchOption" value="id" ng-click="searchOption = 'id'">ID</label>
<input type="radio" ng-model="searchOption" value="Date" ng-click="searchOption = 'date'">Date</label>
</div>
</div>
Then for your search div's:
<div class="col-md-7">
<div id="searchByText" class="form-group form-group-search" ng-hide=" searchOption == 'date'">
<label class="sr-only" for="search">Enter Search</label>
<input type="text" class="form-control" id="search" placeholder="Enter {{searchOption}} ..." ng-model="searchText">
</div>
<div id="SearchBydateRange" class="form-group form-group-search col-md-4" ng-show=" searchOption == 'date' ">
<label class=" sr-only" for="search">
Enter Search
</label>
<input type="date" class="form-control col-md-2" id="search" placeholder="From Date" ng-model="fromDate">
<input type="date" class="form-control col-md-2" id="search" placeholder="To Date" ng-model="toDate">
</div>
</div>
I've two tabs in my homepage, one for personal registration and another to companies. The validation works fine in the first, but in the second tab, the validation don't work and returns nothing.
First of all, the HTML:
<!-- Fire nav tabs -->
<ul class="nav nav-tabs">
<li class="active">Pessoa Fisica</li>
<li>Pessoa Juridica</li>
</ul>
<!-- Nav tabs -->
<div class="tab-content">
<div class="tab-pane fade in active" id="pf">
<form id="pfRegister" action="" method="post" autocomplete="off">
<div class="form-group">
<input type="text" id="firstName" class="form-control inputSk" placeholder="Name" name="firstName" required>
</div>
<div class="form-group">
<input type="text" id="lastName" class="form-control inputSk" placeholder="Surname" name="lastName" required>
</div>
<div class="form-group">
<input type="text" id="email" class="form-control inputSk" placeholder="Email" name="email" required>
</div>
<div class="form-group">
<input type="password" id="password" class="form-control inputSk" placeholder="Password" name="password" required>
</div>
<div class="form-group">
<input type="password" id="confirm_password" class="form-control inputSk" placeholder="Confirm your password" name="confirm_password" required>
</div>
<div class="form-group">
<select id="gender" name="gender" class="form-control inputSk" required>
<option value="">Gender</option>
<option value="Male">Male</option>
<option value="Female">Female</option>
</select>
</div>
<div class="form-group">
<div class='input-group date'>
<input type='text' class="form-control inputSk input" name="birth" id="birth" required>
</div>
</div>
</div>
<div class="actionForm">
<button type="submit" id="send" class="btn btn-default sk skBtn-primary submit">Sign up</button>
</div>
</form>
</div>
<!-- company register -->
<div class="tab-pane fade" id="pj">
<form id="pjRegister" class="captcha" action="" method="post" autocomplete="off">
<div class="form-group">
<input type="text" class="form-control inputSk" name="cnpj" id="cnpj" placeholder="CNPJ" required>
</div>
<div class="form-group">
<input type="text" class="form-control inputSk" name="juridicIdentity" id="razaosocial" placeholder="Razao Social" required>
</div>
<div class="form-group">
<input type="text" class="form-control inputSk" name="companyIdentity" id="company" placeholder="Company Name" required>
</div>
<div class="form-group">
<input type="text" class="form-control inputSk" name="administrator" id="administrator" placeholder="Administrator Account" required>
</div>
<div class="form-group">
<input type="email" class="form-control inputSk" id="pjEmail" name="pjEmail" placeholder="Email" required>
</div>
<div class="form-group">
<input type="email" class="form-control inputSk" id="pj_confirm_email" name="pj_confirm_email" placeholder="Confirm Email" required>
</div>
<div class="form-group">
<input type="password" id="pjPassword" class="form-control inputSk pwstrength_viewport_progress" placeholder="Password" required>
</div>
<div class="form-group">
<input type="password" id="pjConfirm_password" class="form-control inputSk" placeholder="Confirm Password" required>
</div>
<div class="actionForm">
<button type="button" id="pjSend" class="btn btn-default sk skBtn-primary submit">Sign up</button>
</div>
</form>
</div>
</div> <!-- end of pj panel -->
The JS:
$("#pfRegister").validate({
rules: {rules},
messages: {msgs}
});
//companies validator
$("#pjRegister").validate({
rules: {rules},
messages: {msgs}
});
The defaults and showErrors is set inside $.validator.setDefaults.
I tried to validate one by one with this, but still not working:
var pfreg = $("#pfRegister").validate({
rules: {rules},
messages: {msgs}
});
//companies validator
var pjreg = $("#pjRegister").validate({
rules: {rules},
messages: {msgs}
});
pjreg.element('input');
pfreg.element('input');
Searching the web, I found a possible solution:
$("#pjRegister").each(function(){
$(this).validate();
});
But this way the form don't validate when I click the Submit button.
Your first button is a type="submit", which is captured automatically by the validation plugin, so validation is triggered.
Your second button is a type="button", which is not captured, so the plugin does nothing when you click it.
Working DEMO: http://jsfiddle.net/9o0zd4pt/1/