Second jQuery Validate does not works inside Bootstrap tab - javascript

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/

Related

Check which option is selected

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>';

How can i write the validation rule(required) for the select dropdown using Jquery Validation Plugin

I have a set of html5 fields inside a registration form tags in the code below.The inbuilt jquery plugin called validation.js is working fine with all the html fields which doesnt have any other jquery function defined on the html element tag's "id" attribute. In validate.js , the jquery validation rules: and messages: are customised with respect to html element's "name" attribute.My problem is jquery validations are not working on those html element tags whose id is used for defining other functions
For eg :
<p>Are you a user1 or user2 </p>
<div class="form-group">
<label class="control-label" for="usertype"></label>
<select name="usertype" class="form-control input-lg" placeholder="Select user type" id="usertype">
<option value="none" selected>Select user type</option>
<option id="S" value="user1">user1</option>
<option id="T" value="user2">user2</option>
</select>
In the above code snippet you can see the usertype . when the usertype is selected there is a jquery which works onChange event with respect to the id="usertype".But my requirement is to do the validation that,the user must mandatorily select the usertype with the jquery validation plugin as well with the other jquery function .How to solve this? How can i write the validation rule for the select dropdown (required).
<div class="form-group">
<input type="email" class="form-control input-lg" name="uname" placeholder="email address" id="uname" onBlur="checkAvailability()">
<span id="user-availability-status"></span>
<p><img src="loading-small.gif" id="loaderIcon" style="display:none" /></p>
<div id ="errors">
</div>
</div>
<div class="form-group">
<input class="form-control input-lg" name="password" id="password" placeholder="Password" type="password">
</div>
<div class="form-group">
<input class="form-control input-lg" name="password2" placeholder="Re-enter password" type="password">
</div>
<!--<div class="form-group">
<input type="password" class="form-control input-lg" name="cfmPassword" placeholder="Retype above password" id="cfmPassword">
<span id="confirm-password-status"></span>
</div>-->
<p>Are you a user1 or user2 </p>
<div class="form-group">
<label class="control-label" for="usertype"></label>
<select name="usertype" class="form-control input-lg" placeholder="Select user type" id="usertype">
<option value="none" selected>Select user type</option>
<option value="user1">user1</option>
<option value="user2">user2</option>
</select>
<div id ="errors">
</div>
</div>
<p> </p>
<!--Student Section Form BEGIN-->
<div id="user1">
<div class="form-group" >
<input type="text" align="center" class="form-control input-lg" name="user1_first_name" placeholder="First Name" id="firstname">
</div>
<div class="form-group">
<input type="text" align="center" class="form-control input-lg" name="user1_last_name" placeholder="Last Name" id="lastname">
</div>
<div class="form-group">
<label class="col-xs-3 control-label">Gender</label>
<div class="col-xs-9">
<div class="btn-group" data-toggle="buttons">
<label class="btn btn-default">
<input type="radio" class="form-control input-lg" name="gender" value="male" /> Male
</label>
<label class="btn btn-default">
<input type="radio" class="form-control input-lg" name="gender" value="female"/> Female
</label>
<label class="btn btn-default">
<input type="radio" class="form-control input-lg" name="gender" value="other" /> Other
</label>
</div>
</div>
</div>

Change the task of a button placed in the footer of modal

I have a modal. In the header of the modal I have title which is login. And in the body I have a login form and in the footer I have login button.
After the login button I have a hyper text for those who wants to create account which by clicking on it the login form disappear and the register form appears.
Is there any possibility that I can use the same button for logging in to register. (In the simplest word is it possible to use the same button in 2 different forms or if I can't, how can I add a button to the footer and make it act as the submit button of the reiteration form)
<div class="modal fade" id="myModal" role="dialog">
<div class="modal-dialog modal-lg">
<div class="modal-content">
<div class="modal-header" style="background-color: #222">
<div class="mu-title">
<span class="mu-subtitle" id = "loginTitle">Login</span>
</div>
</div>
<!-- Body of the modal -->
<div class="modal-body" style="background-color: #222">
<form id="registerForm" method="POST" action="register.php" novalidate="novalidate" style="display: none">
<div class="form-group">
<label for="name" class="control-label" style="color: white">Full Name</label>
<input type="text" class="form-control" id="fullName" name="fullName" value="" required="" title="Please enter you full name" placeholder="Full Name">
<span class="help-block"></span>
</div>
<div class="form-group">
<label for="username" class="control-label" style="color: white">Username</label>
<input type="text" class="form-control" id="username" name="username" value="" required="" title="Please enter you username" placeholder="username#siswa.um.edu.my">
<span class="help-block"></span>
</div>
<div class="form-group">
<label for="password" class="control-label" style="color: white">Password</label>
<input type="password" class="form-control" id="password" name="password" value="" required="" title="Please enter your password">
</div>
<div class="form-group">
<label for="matrix" class="control-label" style="color: white">Matrix Number</label>
<input type="text" class="form-control" id="matrixNO" name="matrixNO" value="" required="" title="Please enter you Matrix Number" placeholder="Matrix Number ">
<span class="help-block"></span>
</div>
</form>
<form id="loginForm" method="POST" action="login.php" novalidate="novalidate">
<div class="form-group">
<label for="username" class="control-label" style="color: white">Username</label>
<input type="text" class="form-control" id="username" name="username" value="" required="" title="Please enter you username" placeholder="username#siswa.um.edu.my">
<span class="help-block"></span>
</div>
<div class="form-group">
<label for="password" class="control-label" style="color: white">Password</label>
<input type="password" class="form-control" id="password" name="password" value="" required="" title="Please enter your password">
</div>
</div>
<div class="modal-footer" style="background-color: #222">
<button type="submit" id ="loginButt" class="mu-readmore-btn">Login</button></br></br>
</form>
<span style="color: white" >Create an <a href= "#" style="color: white" onClick="$('#loginForm').hide();$('#registerForm').show(); " >Account</a> </span>
</div>
</div>
Here are some boilerplates that you can try with....(your part is just basically determining which form is active...)
$(document).ready(function(){
$('#submitbtn').click(function(e){
e.preventDefault();
var form=$('#currentForm').val();
if(form=="login")
{
alert('submit to login');
}
else
{
alert('submit to register');
}
});
$('#btnchange').click(function(){
var form=$('#currentForm').val();
if(form=="login")
{
$('#currentForm').val('register');
$('#registration-form').show();
$('#login-form').hide();
}
else
{
$('#currentForm').val('login');
$('#registration-form').hide();
$('#login-form').show();
}
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.1/jquery.min.js"></script>
<form method="post" action="register.php" name="registration-form" id="registration-form" style="display:none;">
<label for="name">Name:</label>
<input type="text" name="usename"><br/>
<label for="emailid">Email ID:</label>
<input type="text" name="emailid"><br/>
<label for="password">Password :</label>
<input type="password" name="password">
</form><br/><br/>
<form method="post" action="login.php" name="login-form" id="login-form">
<label for="emailid">Email ID :</label>
<input type="text" name="emailid">
<label for="password">Password :</label>
<input type="password" name="password">
</form>
<input type="hidden" value="login" id="currentForm"/>
<input type="button" value="Submit" name="submitbtn" id="submitbtn">
<input type="button" value="Toggle Form" id="btnchange"/>
Just so I understand your question a little bit better, the basic idea of what you're trying to do is:
Single page modal, one form. Take user text input, check for existing user with that info, create new user if none exists?

how to access different form elements in an HTML page using Angular JS without using Views of Angular JS

Hi I am new to Angular Js and I am trying to make a Login page where I Have three forms which are as follows:
Login Form
Create New Account form
Forgot password Form.
All this forms are present in one HTML Page.HTML page for the login(login.html) is as follows:
<form class="login-form" ng-submit="submit()" method="POST" ng-controller="SignInController" >
<h3 class="form-title">Sign In</h3>
<div class="alert alert-danger display-hide">
<button class="close" data-close="alert"></button>
<span>
Enter any username and password. </span>
</div>
<div class="form-group">
<!--ie8, ie9 does not support html5 placeholder, so we just show field title for that-->
<label class="control-label visible-ie8 visible-ie9">Email Address</label>
<input class="form-control form-control-solid placeholder-no-fix" type="text" autocomplete="off" placeholder="Email Addresss" name="email" ng-model="email_id"/>
</div>
<div class="form-group">
<label class="control-label visible-ie8 visible-ie9">Password</label>
<input class="form-control form-control-solid placeholder-no-fix" type="password" autocomplete="off" placeholder="Password" name="password" ng-model="password"/>
</div>
<div class="form-actions" >
<button type="submit" class="btn btn-success uppercase">Login</button>
Forgot Password?
</div>
<div class="create-account">
<p>
Create an account
</p>
</div>
</form>
<form class="forget-form" method="post" ng-controller="ForgetPassword" ng-submit="passwordGenerator()"> <!-- action="#"-->
<h3>Sign In</h3>
<div class="form-group">
<input class="form-control placeholder-no-fix" type="text" autocomplete="off" placeholder="Email Address" name="email" ng-model="ForgetPassEmailId" />
</div>
<div class="form-actions">
<button type="submit" class="btn btn-success uppercase btn-block">Reset my password</button> <!--type="submit" -->
</div>
</form>
<form class="register-form" action="select_pricing.html" method="post">
<h3>Create Account</h3>
<p class="hint">
Enter your personal details below:
</p>
<div class="form-group">
<label class="control-label visible-ie8 visible-ie9">Full Name</label>
<input class="form-control placeholder-no-fix" type="text" placeholder="Full Name" name="fullname" />
</div>
<div class="form-group">
<!--ie8, ie9 does not support html5 placeholder, so we just show field title for that-->
<label class="control-label visible-ie8 visible-ie9">Email Address</label>
<input class="form-control placeholder-no-fix" type="text" placeholder="Email Address" name="email" />
</div>
<div class="form-group">
<label class="control-label visible-ie8 visible-ie9">Password</label>
<input class="form-control placeholder-no-fix" type="password" autocomplete="off" id="register_password" placeholder="Password" name="password" />
</div>
<div class="form-group margin-top-20 margin-bottom-20">
<label class="check">
<input type="checkbox" name="tnc" /> I agree to the <a href="#">
Terms of Service </a> & <a href="#">
Privacy Policy </a>
</label>
<div id="register_tnc_error">
</div>
</div>
<div class="form-actions">
<button type="submit" id="register-submit-btn" class="btn btn-success uppercase btn-block">Create</button>
</div>
</form>
The Angular Controller for the Forget password is as follows
var myApp = angular.module('Login_Upquire_Angular',[]);
myApp.controller("ForgetPassword",['$scope',function($scope){
$scope.passwordGenerator=function(){
var email_id=$scope.ForgetPassEmailId;
if (email_id=="abc#gmail.com"){
console.log("Reset Request is accepted");
window.location="/login.html";
}
}
}]);
As you can see based on my Angular js File, I want to check whether the given password matches with abc#gmail.com, if yes then it should print on my console "REset Request is accepted" and take me back to login page(/login.html) and to the form element namely login-form. Yet I am getting the following error
Cannot POST /login.html
Can somebody help me with this? I have tried but couldn't find a solution for it.
You'll have to do some asynchronous validation. Something like this: http://www.codelord.net/2014/11/02/angularjs-1-dot-3-taste-async-validators/

How to submit a form using jQuery?

I want to submit a form using jQuery, so I have 4 fields that needed to be checked, but when I submit, it displays the first alert submit but i doesn't check if the fields are valid or not. What's the error in my code? Much appreciated.
$(document).ready(function(){
$('input[name=subdomain]').keyup(subdomain_check);
$('input[name=password]').keyup(password_strenght);
$('input[name=c_password]').keyup(password_check);
$('input[name=email]').keyup(email_check);
$('#install').on('submit', function(){
alert("submit");
if ($('input[name=subdomain]').valid() == true && $('input[name=password]').valid() == true && $('input[name=c_password]').valid() == true && $('input[name=email]').valid() == true){
alert("TRUE");
return true;
} else {
alert("FALSE");
return false;
}
});
});
Here's The HTML form :
<form class="form-horizontal" method="post" id="install" action="etape2.html" role="form">
<input type="hidden" id="install-element-0" value="install" name="form">
<input type="hidden" id="install-element-1" value="insert" name="action">
<div class="col-md-6">
<input type="text" id="install-element-2" required="" name="title" class="form-control input-md col-md-6">
</div>
<div class="col-md-6">
<input type="text" id="install-element-3" required="" name="first_name" class="form-control input-md col-md-6">
</div>
<div class="col-md-6">
<input type="text" id="install-element-4" required="" name="last_name" class="form-control input-md col-md-6">
</div>
<div class="col-md-6">
<input type="text" id="install-element-5" required="" name="email" class="form-control input-md col-md-6">
</div>
<div class="col-md-6">
<input type="password" id="install-element-6" required="" class="form-control input-md col-md-6" name="password">
</div>
<div class="col-md-6">
<input type="password" id="install-element-7" required="" class="form-control input-md col-md-6" name="c_password">
</div>
<div class="col-md-6"><input type="text" required="" placeholder="" id="subdomain" name="subdomain" class="form-control input-md col-md-6">
<div class="form-actions col-md-9 col-md-offset-3 text-right">
<input type="submit" id="install-element-9" class="btn btn-primary" name=""value="Valider">
</div>
</div>
</form>
Is there a way to check by the functions return and not by validate ?
Add:
$('#install').on('submit', function(e){
e.preventDefault();
[..]
}
to your code

Categories

Resources