JQuery AJAX serialize getting null values - javascript

I can't find it out why this is not working.I have done this before a lot of times but this time this is not event working seriously don't know please help me find it out
HTML(signup.html)
<form role="form" id="signupForm">
<div class="form-group">
<label for="first_name" class="control-label"><span
class="glyphicon glyphicon-user"></span> First Name</label> <input
type="text" class="form-control" name="first_name" id="firstName"
for="first_name" placeholder="Enter First Name">
</div>
<div class="form-group">
<label for="last_name" class="control-label"><span
class="glyphicon glyphicon-user"></span> Last Name</label> <input
type="text" class="form-control" name="last_name" id="lastName"
for="last_name" placeholder="Enter Last Name">
</div>
<div class="form-group">
<label for="username" class="control-label"><span
class="glyphicon glyphicon-user"></span> Username</label> <input
type="text" class="form-control" name="user_name" id="username"
for="user_name" placeholder="Enter Username">
</div>
<div class="form-group">
<label for="email"><span
class="glyphicon glyphicon-envelope"></span> Email</label> <input
type="email" class="form-control" name="email" id="email"
for="email" placeholder="Enter Email">
</div>
<div class="form-group">
<label for="mobile_number"><span
class="glyphicon glyphicon-phone"></span> Mobile Number</label> <input
type="text" class="form-control" name="mobile_number"
id="mobile_number" for="mobile_number"
placeholder="Enter Mobile Number">
</div>
<div class="form-group">
<label for="password"><span class="glyphicon glyphicon-lock"></span>
Password</label> <input type="password" class="form-control"
name="password" id="password" for="password"
placeholder="Enter Password">
<!--<ul>
<li class="help-block red"> *password must be 8 characters long</li>
<li class="help-block red"> *password must contain an Uppercase letter </li>
<li class="help-block red"> *password must contain an Lowercase letter </li>
<li class="help-block red"> *password must contain a special character </li>
<li class="help-block red"> *password must contain a number </li>
</ul>-->
</div>
<div class="form-group">
<label for="confirm_password"><span
class="glyphicon glyphicon-lock"></span> Confirm Password</label> <input
type="password" class="form-control" name="confirm_password"
id="confirmPassword" for="confirm_password"
placeholder="Enter Password again">
</div>
<div class="dropdown form-group">
<label for="security_question"><span class="secQue"></span>
Security Questions </label><br> <select name="security_question"
id="secQue" class="btn btn-default">
<option value=""> security Question? </option>
<option value="what is your school name?"> what is your school name? </option>
<option value="what is your native place name?"> what is your native place name? </option>
<option value="what is your favourite place?"> what is your favourite place? </option>
<option value="what is your favourite food?"> what is your favourite food? </option>
<option value="what is your pet name?"> what is your pet name? </option>
</select>
</div>
<div class="form-group">
<label for="answer"><span class="glyphicon glyphicon-pencil"></span>
Answer</label> <input type="answer" class="form-control" name="answer"
id="answer" for="answer" placeholder="Enter Answer">
</div>
<div class="form-group">
<label for="user_city"><span
class="glyphicon glyphicon-record"></span> City</label> <input type="text"
class="form-control" name="user_city" id="city" for="city"
placeholder="Enter city">
</div>
<div class="form-group">
<button id="createAccount" class="btn btn-info">Submit</button>
</div>
</form>
<script src="https://code.jquery.com/jquery-3.2.1.min.js"
integrity="sha256-hwg4gsxgFZhOsEEamdOYGBf13FyQuiTwlAQgxVSNgt4="
crossorigin="anonymous"></script>
JQuery(accounts.js)
$(function(){
var bCreateAccount = $('#createAccount');
//Invokes createAccount function
bCreateAccount.on('click',createAccount);
//calls the SignupServlet AJAX request
function createAccount(){
$("#signupForm").on('submit' , function(e) {
e.preventDefault();
$.ajax({
url : 'SignupServlet',
type:'POST',
contentType: 'application/json; charset=utf-8',
data : $('#signupForm').serializeArray(),
success : function(response){
console.log('Response :' +response);
},
error : function(){
console.log('Error :' +error);
}
});
});
}
});
SignupServlet
private void getParameters(HttpServletRequest request,HttpServletResponse response) {
firstName = request.getParameter("first_name");
lastName = request.getParameter("last_name");
userName = request.getParameter("user_name");
email = request.getParameter("email");
mobileNumber = request.getParameter("mobile_number");
password = request.getParameter("password");
confirmPassword = request.getParameter("confirm_password");
securityQuestion = request.getParameter("security_question");
answer = request.getParameter("answer");
userCity = request.getParameter("user_city");
}
protected void service(HttpServletRequest request, HttpServletResponse response)
throws ServletException, IOException {
System.out.println("Inside SignupServlet");
getParameters(request, response);
System.out.println("Username : "+userName);
}
I am not able to find out whats the problem with this code.Guyz please help me to get the solution.It will be really helpful.

Your content type is for json but you're not posting the data as json nor is your server expecting json.
Remove the content type parameter from the ajax request so it will be application/x-www-form-urlencoded which is what your server side code seem to be expecting.

Related

How can I link two html forms with one google sheet?

<script>
const scriptURL = ''
const form = document.forms['submit-to-google-sheet']
form.addEventListener('submit', e => {
e.preventDefault()
fetch(scriptURL, { method: 'POST', body: new FormData(form)})
.then(response => console.log('Success!', response))
.catch(error => console.error('Error!', error.message))
})
</script>
<div class="col-md-5">
<div class="background-form">
<form id="contact" action="" method="post">
<fieldset>
<input placeholder="Your name" name="Name" type="text" tabindex="1" required >
</fieldset>
<fieldset>
<input placeholder="Your Email Address" name="Email" type="email" tabindex="2" required>
</fieldset>
<fieldset>
<input placeholder="Your Phone Number" name="Phone_No" type="tel" tabindex="3" required>
</fieldset>
<fieldset>
<select name="Category_Interested" title="Center" class="form-control" required>
<option value=""> Category Interested In</option>
<option value="Modular Furnitur">Modular Furniture</option>
<option value="Home Furnishing">Home Furnishing</option>
<option value="Kitchen Appliances">Kitchen Appliances</option>
</select>
</fieldset>
<fieldset>
<button name="submit" type="submit" id="contact-submit" data-submit="...Sending">Submit</button>
</fieldset>
<div class="callus">
<span class="call-span">Call Us: +91 9711600069</span>
</div>
</form>
</div>
<section id="fixed-form-container">
<div class="button blink">
<span>Free Enquiry</span>
</div>
<div class="body">
<form name="submit-to-google-sheet">
<div class="form-group">
<label for="name">Name:</label>
<input type="name" class="form-control" id="name" name="Name">
</div>
<div class="form-group">
<label for="contact">Phone No.:</label>
<input type="tel" name="Phoneno" class="form-control" id="contact">
</div>
<div class="form-group" style="margin-top: -38px;">
<label for="email">Email address:</label>
<input type="email" class="form-control" id="email" name="email">
</div>
<div class="form-group">
<label for="category">Category Interested In</label>
<select name="category" title="Center" class="form-control" required>
<option value=""> Category Interested In</option>
<option value="Modular Furnitur">Modular Furniture</option>
<option value="Home Furnishing">Home Furnishing</option>
<option value="Kitchen Appliances">Kitchen Appliances</option>
</select>
</div>
<button type="submit" class="btn btn-default">Submit</button>
<div class="callus callus-phone">
<span class="call-phone-span call-span">Call Us: +91 9711600069</span>
</div>
</form>
</div>
</section>
</div>
I am trying to link two forms that are created using HTML with one google sheet. If i try adding two SrciptURLs, it shows an error. I want that data of both the forms can be seen in one Google Sheet. Is that possible? If yes, then how?
These are the forms along with the script that i added to link it to the Google Sheet.
There is no error when i fill in the entries and submit in both the forms but details of only one form can be seen in the Google Sheets.

Submit and open Success Messege popup box

I'm new in Javascript, So i try to make Submit and open Success Messege popup box, currently data post to ajax is working then i need open a success message with checkbox value. what i do for exact way to make model popup with value of checkbox after successful submission?
document.addEventListener("DOMContentLoaded", function(e) {
var a = document.getElementById("alecaddd-testimonial-form");
a.addEventListener("submit", function(e) {
e.preventDefault(), o();
var r = {
name: a.querySelector('[name="name"]').value,
email: a.querySelector('[name="email"]').value,
message: a.querySelector('[name="message"]').value,
nonce: a.querySelector('[name="nonce"]').value
};
if (r.name)
if (/^(([^<>()\[\]\\.,;:\s#"]+(\.[^<>()\[\]\\.,;:\s#"]+)*)|(".+"))#((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\])|(([a-zA-Z\-0-9]+\.)+[a-zA-Z]{2,}))$/.test(String(r.email).toLowerCase()))
if (r.message) {
var t = a.dataset.url,
s = new URLSearchParams(new FormData(a));
a.querySelector(".js-form-submission").classList.add("show"), fetch(t, {
method: "POST",
body: s
}).then(function(e) {
return e.json()
}).catch(function(e) {
o(), a.querySelector(".js-form-error").classList.add("show")
}).then(function(e) {
o(), 0 !== e && "error" !== e.status ? (a.querySelector(".js-form-success").classList.add("show"), a.reset()) : a.querySelector(".js-form-error").classList.add("show")
})
} else a.querySelector('[data-error="invalidMessage"]').classList.add("show");
else a.querySelector('[data-error="invalidEmail"]').classList.add("show");
else a.querySelector('[data-error="invalidName"]').classList.add("show")
})
})
<div class="package-container">
<form id="alecaddd-testimonial-form" class="zon-form" action="#" method="post" data-url="<?php echo admin_url('admin-ajax.php'); ?>">
<div id="clmn3">
<div class="cnt">
<div class="row" style="background: url(<?php print $picture; ?>);">
<h3>
<?php echo esc_attr( $budget ); ?>
</h3>
<label class="zon-container"><p>2 Nights 3 Days: 3399</p>
<input class="chb" type="checkbox" name="package[]" value="3000" checked="checked">
<span class="checkmark"></span>
</label>
<label class="zon-container"><p>3 Nights 4 Days : 4399</p>
<input class="chb" type="checkbox" name="package[]" value="4000">
<span class="checkmark"></span>
</label>
<label class="zon-container"><p>4 Nights 5 Days : 5399</p>
<input class="chb" type="checkbox" name="package[]" value="5000">
<span class="checkmark"></span>
</label>
</div>
</div>
<div class="zon-input-fields">
<div class="field-container">
<input type="text" class="field-input" placeholder="Adult" id="name" name="name" required>
<small class="field-msg error" data-error="invalidName">Your Name is Required</small>
</div>
<div class="field-container">
<input type="text" class="field-input" placeholder="Adult" id="adult" name="adult" required>
<small class="field-msg error" data-error="invalidName">Your Name is Required</small>
</div>
<div class="field-container">
<input type="email" class="field-input" placeholder="Child" id="email" name="email" required>
<small class="field-msg error" data-error="invalidEmail">The Email address is not valid</small>
</div>
<div class="field-container">
<input type="text" class="field-input" placeholder="infant" id="infant" name="message" required>
<small class="field-msg error" data-error="invalidName">Your Name is Required</small>
</div>
<div class="field-container">
<input type="date" class="field-input" placeholder="date" id="date" name="date" required>
<small class="field-msg error" data-error="invalidEmail">The Email address is not valid</small>
</div>
<div class="field-container">
<input type="phone" class="field-input" placeholder="phone" id="phone" name="phone" required>
<small class="field-msg error" data-error="invalidEmail">The Email address is not valid</small>
</div>
<div class="field-container">
<input type="price" class="field-input" placeholder="price" id="price" name="price" required>
<small class="field-msg error" data-error="invalidEmail">The Email address is not valid</small>
</div>
<div class="field-container">
<input type="submit" name="submit" class='btn'>
</div>
<div class="field-container">
<small class="field-msg js-form-submission">Submission in process, please wait…</small>
<small class="field-msg success js-form-success">Message Successfully submitted, thank you!</small>
<small class="field-msg error js-form-error">There was a problem with the Contact Form, please try again!</small>
<input type="hidden" name="action" value="submit_testimonial">
<input type="hidden" name="nonce" value="<?php echo wp_create_nonce(" testimonial-nonce ") ?>"> </form>
</div>
</div>
</div>
Any help,as always, is greatly appreciated.
move
a.querySelector(".js-form-submission").classList.add("show")
before
return e.json()

URL mapping using jquery in spring mvc

This somewhat confusing but it is my project requirement. I am using spring mvc and jquery. Now I have to post the form and expose the data to back end using ajax call of jquery for this my jquery is
home='<%=request.getContextPath()%>';
$('#userReg').submit(function(event){
var add = {}
add["type"] = $("#type").val();
add["name"] = $("#companyName").val();
add["regNumber"] = $("#regNumber").val();
add["dob"] = $("#dob").val();
add["email"] = $("#email").val();
add["password"] = $("#password").val();
add["confirmPassword"] = $("#cpassword").val();
add["line1"] = $("#line1").val();
add["line2"] = $("#line2").val();
add["state"] = $("#state").val();
add["country"] = $("#country").val();
add["zipCode"] = $("#zipCode").val();
console.log("search: ", add);
event.preventDefault();
$.ajax({
type : "POST",
headers: {
'Accept': 'application/json',
'Content-Type': 'application/json'
},
url : home+"/addCompany",
data : JSON.stringify(add),
dataType : 'json',
timeout : 100000,
success : function(data) {
console.log("SUCCESS: ", data);
alert(data)
},
error : function(e) {
console.log("ERROR: ", e);
alert(e);
},done : function(e) {
console.log("DONE");
}
});
});
and corresponding method
#RequestMapping(value="/addCompany",method=RequestMethod.POST,consumes=MediaType.APPLICATION_JSON_VALUE)
public#ResponseBody String userLogin(HttpServletRequest req,#RequestBody CompanyRegVO user){
logger.debug("signUp user:"+user);
// get reCAPTCHA request param
String gRecaptchaResponse = req.getParameter("g-recaptcha-response");
boolean isVerified= Verify.verifyGcaptchResponse(gRecaptchaResponse);
ObjectMapper mapper=new ObjectMapper();
String jsonString="";
System.out.println("signUp user:"+user);
Integer id=null;
try{
if(isVerified){
id = signupHandler.process(user);
if(id!=null){
logger.debug("ID in controller:"+id);
emailHandler.sendVerificationMail(id,user.getEmail());
System.out.println("user create successfully");
}
jsonString=mapper.writeValueAsString("User creaated successfully");
}
else
jsonString= mapper.writeValueAsString("please verify that you are not a robot");
} catch (JsonGenerationException e) {
e.printStackTrace();
} catch (JsonMappingException e) {
e.printStackTrace();
} catch (IOException e) {
e.printStackTrace();
} catch (Exception e) {
try {
jsonString=mapper.writeValueAsString(e.getMessage());
} catch (JsonProcessingException e1) {
}
return jsonString;
}
return "success";
}
Now my form is mapped with this URL
#RequestMapping(value="/signUp",method=RequestMethod.GET)
public String register(Model model){
CompanyRegVO user=new CompanyRegVO();
model.addAttribute("userForm", user);
return "signUp";
}
When I submit my form I expected that my jquery code will execute will invoke my upper one method but it inovkes above get method and return me signUp page with my data as query parameter. Now if I comment mapping for "/signUp" my server is giving 404 error. since page is mapped to that URL. So any one can please tell what is remedy for this kind of situation jquery or spring??
Edit 1:
below is my form
<form class="form-horizontal" name="userReg" id="userReg">
<div class="form-group">
<label class="col-sm-2 control-label">Company Name</label>
<div class="col-sm-4">
<input name="companyName" type="text" class="form-control" id="companyName" placeholder="Name" />
</div>
</div>
<br>
<div class="form-group">
<label class="col-sm-2 control-label">Registration number</label>
<div class="col-sm-4">
<input name="RegNumber" type="number" required="required" class="form-control" id="regNumber" placeholder="Registration number" />
</div>
</div>
<br>
<div class="form-group">
<label class="col-sm-2 control-label">Address line 1</label>
<div class="col-sm-4">
<input name="line1" type="text" required="required" class="form-control" id="line1" placeholder="line1" />
</div>
</div>
<br>
<div class="form-group">
<label class="col-sm-2 control-label">Address line 2</label>
<div class="col-sm-4">
<input name="line2" type="text" class="form-control" id="line2" placeholder="line2" />
</div>
</div>
<br>
<div class="form-group">
<label class="col-sm-2 control-label">Zip code</label>
<div class="col-sm-4">
<input name="zipCode" type="number" required="required" class="form-control" id="zipCode" placeholder="zip code" />
</div>
</div>
<br>
<div class="form-group">
<label class="col-sm-2 control-label">State</label>
<div class="col-sm-4">
<input name="state" type="text" required="required" class="form-control" id="state" placeholder="State" />
</div>
</div>
<br>
<div class="form-group">
<label class="col-sm-2 control-label">Country</label>
<div class="col-sm-4">
<input name="country" type="text" required="required" class="form-control" id="country" placeholder="country" />
</div>
</div>
<br>
<div class="form-group">
<label class="col-sm-2 control-label">Email</label>
<div class="col-sm-4">
<input name="email" type="email" class="form-control" id="email" placeholder="Email" />
</div>
</div>
<br>
<div class="form-group">
<label class="col-sm-2 control-label">Date of Birth(dd-mm-yyyy)</label>
<div class="col-sm-4">
<input name="dob" type="text" class="form-control" id="dob" placeholder="Date of birth" />
</div>
</div>
<br>
<div class="form-group">
<label class="col-sm-2 control-label">Password</label>
<div class="col-sm-4">
<input name="password" id="password" maxlength="12" pattern="((?=.*\d)(?=.*[a-z])(?=.*[A-Z])(?=.*[##$%]).{8,12})" required="required" type="password" class="form-control" id="password" placeholder="password" />
</div>
</div>
<br>
<div class="form-group">
<label class="col-sm-2 control-label">Confirm Password</label>
<div class="col-sm-4">
<input name="confirmPassword" id="cpassword" maxlength="12" required="required" type="password" class="form-control" id="cpassword" placeholder="confirm password" />
<span id='message'></span>
</div>
</div>
<br>
<div class="form-group">
<label class="col-sm-2 control-label">User type</label>
<div class="col-sm-4">
<select class="form-control" id="type" name="type" >
<option selected="selected">--select--</option>
<option value="user" >CEO</option>
<option value="admin">HR</option>
</select>
</div>
</div>
<br>
<div class="form-group">
<div class="g-recaptcha"
data-sitekey="my-public key"></div>
</div>
<br>
<div class="col-md-6 center-block">
<input type="submit" class="btn-lg btn-primary center-block" value="save">
</div>
</form>
When use <input type="submit" ..... /> it will submit your form according to your form action url. e.g something.html
So change the and add a click listener.
<input type="button" onclick="_submit()"/>
and your js would be
function _submit(){
// submit your form via ajax.
}
This should submit your form with your specified url.
Thanks.

HTML 5 / CSS button beside dropdown list

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>

Second jQuery Validate does not works inside Bootstrap tab

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/

Categories

Resources