// USING THE TAB EVENT
$("input").keydown(function (e) {
//alert("EVENT :"+e.which)
var regex = /^[a-zA-Z]*$/;
var mailformat = /^\w+([\.-]?\w+)*#\w+([\.-]?\w+)*(\.\w{2,3})+$/;
var fname = document.getElementById("first_name").value;
var lname = document.getElementById("last_name").value;
var phn = document.getElementById("phone").value;
var emailid = document.getElementById("email").value;
var pass = document.getElementById("password").value;
var phoneno = /^\d{10}$/;
if (e.which == 9)
{
if(fname == "")
{
document.getElementById("first_name_err").innerHTML= "First name not be empty";
document.getElementById("first_name_err").style.display = "block";
return false;
}
else
{
document.getElementById("first_name_err").innerHTML= "";
document.getElementById("first_name_err").style.display = "none";
}
if (lname=="")
{
document.getElementById("last_name_err").innerHTML= "Last name not be empty";
document.getElementById("last_name_err").style.display = "block";
}
else
{
document.getElementById("last_name_err").innerHTML= "";
document.getElementById("last_name_err").style.display = "none";
}
}
<!-- BEGIN REGISTRATION FORM -->
<form method="post" id="create_account">
<h3 class="font-green">Sign Up</h3>
<div class="alert alert-danger" id="error" style="display: none;"></div>
<div class="alert alert-success" id="success" style="display: none;"></div>
<p class="hint"> Enter your personal details below: </p>
<div class="form-group">
<label class="control-label visible-ie8 visible-ie9">First Name</label>
<input class="form-control placeholder-no-fix" type="text" placeholder="First Name" name="first_name" id="first_name" onkeypress=" return onlyAlphabets(event)" />
<span id="first_name_err" style="display: none;"></span>
</div>
<div class="form-group">
<label class="control-label visible-ie8 visible-ie9">Last Name</label>
<input class="form-control placeholder-no-fix" type="text" placeholder="Last Name" name="last_name" id="last_name" onkeypress=" return onlyAlphabets(event)"/>
<span id="last_name_err" style="display: none;"></span>
</div>
<div class="form-group">
<label class="control-label visible-ie8 visible-ie9">Phone</label>
<input class="form-control placeholder-no-fix" type="text" placeholder="Phone" name="phone" id="phone" onkeypress="return isNumberKey(event)" maxlength="10" />
<span id="phone_err" style="display: none;"></span>
</div>
<div class="form-group">
<label class="control-label visible-ie8 visible-ie9">Email</label>
<input class="form-control placeholder-no-fix" type="text" placeholder="Email" name="email" id="email" />
<span id="email_err" style="display: none;"></span>
</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" placeholder="Password" name=" password" id="password" onkeyup="nospaces(this)" />
<span id="password_err" style="display: none;"></span>
</div>
<div class="form-group margin-top-20 margin-bottom-20">
<label class="mt-checkbox mt-checkbox-outline">
<input type="checkbox" name="tnc" /> I agree to the
Terms of Service &
Privacy Policy
<span></span>
</label>
<div id="register_tnc_error"> </div>
</div>
<div class="form-actions">
<!-- <button type="button" id="register-back-btn" class="btn green btn-outline">Back</button> -->
<button type="button" id="register-submit-btn" class="btn btn-success uppercase create_account">Submit</button>
</div>
</form>
Please check the above code when I hit the tab from first text box. I'll get the output however, the second text box event is also fired . How to manage Tab event handling using the multiple text boxes. I am able to get the output when hit tab on first tab box and I need to handle the other text boxes as well.
Instead of using keydown, I would recommend using the focusout event. That way, no matter how they took the focus away from the field whether by hitting tab, or by clicking on something else, the function will run.
// USING THE TAB EVENT
let validateForm = function (e) {
var regex = /^[a-zA-Z]*$/;
var mailformat = /^\w+([\.-]?\w+)*#\w+([\.-]?\w+)*(\.\w{2,3})+$/;
var fname = document.getElementById("first_name").value;
var lname = document.getElementById("last_name").value;
var phn = document.getElementById("phone").value;
var emailid = document.getElementById("email").value;
var pass = document.getElementById("password").value;
var phoneno = /^\d{10}$/;
if(fname == "")
{
document.getElementById("first_name_err").innerHTML= "First name not be empty";
document.getElementById("first_name_err").style.display = "block";
return false;
}
else
{
document.getElementById("first_name_err").innerHTML= "";
document.getElementById("first_name_err").style.display = "none";
}
if (lname=="")
{
document.getElementById("last_name_err").innerHTML= "Last name not be empty";
document.getElementById("last_name_err").style.display = "block";
}
else
{
document.getElementById("last_name_err").innerHTML= "";
document.getElementById("last_name_err").style.display = "none";
}
}
$("#create_account").focusout(validateForm);
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<!-- BEGIN REGISTRATION FORM -->
<form method="post" id="create_account">
<h3 class="font-green">Sign Up</h3>
<div class="alert alert-danger" id="error" style="display: none;"></div>
<div class="alert alert-success" id="success" style="display: none;"></div>
<p class="hint"> Enter your personal details below: </p>
<div class="form-group">
<label class="control-label visible-ie8 visible-ie9">First Name</label>
<input class="form-control placeholder-no-fix" type="text" placeholder="First Name" name="first_name" id="first_name" onkeypress=" return onlyAlphabets(event)" />
<span id="first_name_err" style="display: none;"></span>
</div>
<div class="form-group">
<label class="control-label visible-ie8 visible-ie9">Last Name</label>
<input class="form-control placeholder-no-fix" type="text" placeholder="Last Name" name="last_name" id="last_name" onkeypress=" return onlyAlphabets(event)"/>
<span id="last_name_err" style="display: none;"></span>
</div>
<div class="form-group">
<label class="control-label visible-ie8 visible-ie9">Phone</label>
<input class="form-control placeholder-no-fix" type="text" placeholder="Phone" name="phone" id="phone" onkeypress="return isNumberKey(event)" maxlength="10" />
<span id="phone_err" style="display: none;"></span>
</div>
<div class="form-group">
<label class="control-label visible-ie8 visible-ie9">Email</label>
<input class="form-control placeholder-no-fix" type="text" placeholder="Email" name="email" id="email" />
<span id="email_err" style="display: none;"></span>
</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" placeholder="Password" name=" password" id="password" onkeyup="nospaces(this)" />
<span id="password_err" style="display: none;"></span>
</div>
<div class="form-group margin-top-20 margin-bottom-20">
<label class="mt-checkbox mt-checkbox-outline">
<input type="checkbox" name="tnc" /> I agree to the
Terms of Service &
Privacy Policy
<span></span>
</label>
<div id="register_tnc_error"> </div>
</div>
<div class="form-actions">
<!-- <button type="button" id="register-back-btn" class="btn green btn-outline">Back</button> -->
<button type="button" id="register-submit-btn" class="btn btn-success uppercase create_account">Submit</button>
</div>
</form>
You could also use the blur event, but since focusout supports event bubbling (blur does not), you can just attach one event listener to the form, instead of attaching one to each element.
Related
Welcome to my question.
I am trying to make a sign up form that checks for some things.
I want to make an event listener on the submit button, to catch some things
First of all I have to prevent the default behavior of submission of the form.
That is where I am stuck a while now. For some reason it does not seem to work.
This is how my form is made:
<form id="myform" class="signup-form" onsubmit = "signup()" method="POST">
<!-- form header -->
<div class="form-header">
<h1>Become a Member</h1>
</div>
<!-- form body -->
<div class="form-body">
<!-- Firstname and Lastname -->
<div class="horizontal-group">
<div class="form-group left">
<label for="username" class="label-title">Username *</label>
<input type="text" id="username" class="form-input" placeholder="enter your username" required="required" />
</div>
<div class="form-group right">
<label for="lastname" class="label-title">Confirm Username *</label>
<input type="text" id="confirm-username" class="form-input" placeholder="confirm your username" required="required" />
</div>
</div>
<!-- Email -->
<div class="form-group">
<label for="email" class="label-title">Email*</label>
<input type="email" id="email" class="form-input" placeholder="enter your email" required="required">
</div>
<!-- Password and confirm password -->
<div class="horizontal-group">
<div class="form-group left">
<label for="password" class="label-title">Password *</label>
<input type="password" id="password" class="form-input" placeholder="enter your password" required="required">
</div>
<div class="form-group right">
<label for="confirm-password" class="label-title">Confirm Password *</label>
<input type="password" class="form-input" id="confirm-password" placeholder="enter your password again" required="required">
</div>
</div>
</div>
<!-- form footer -->
<div class="form-footer">
<span>Are you already a member? Click here to login!</span>
<button id= "submit-button"type="submit" class="btn">Create</button>
</div>
</form>
</div>
And this is how my sign up function on my js file is created:
// sign up
function signup(){
const fUsername = document.getElementById("username").value;
const sUsername = document.getElementById("confirm-username").value;
const email = document.getElementById("email").value;
const fPassword = document.getElementById("password").value;
const sPassword = document.getElementById("confirm-password").value;
const form = document.getElementById("myform");
form.addEventListener("submit", (e) => {
e.preventDefault();
console.log("I am in eventListener");
});
}
Please tell me what I am doing wrong! Also I have to mention that I have figured out that if I make my form like this
<form id="myform" class="signup-form" onsubmit = "signup(); return false;" method="POST">
it will not submit automatically, but I wanted to do it with the eventListener.
Thank you in advance
Call signup when the page loads instead of when the submit event is fired:
// sign up
function signup() {
const fUsername = document.getElementById("username").value;
const sUsername = document.getElementById("confirm-username").value;
const email = document.getElementById("email").value;
const fPassword = document.getElementById("password").value;
const sPassword = document.getElementById("confirm-password").value;
const form = document.getElementById("myform");
form.addEventListener("submit", (e) => {
e.preventDefault();
console.log("I am in eventListener");
});
}
signup()
<form id="myform" class="signup-form" method="POST">
<!-- form header -->
<div class="form-header">
<h1>Become a Member</h1>
</div>
<!-- form body -->
<div class="form-body">
<!-- Firstname and Lastname -->
<div class="horizontal-group">
<div class="form-group left">
<label for="username" class="label-title">Username *</label>
<input type="text" id="username" class="form-input" placeholder="enter your username" required="required" />
</div>
<div class="form-group right">
<label for="lastname" class="label-title">Confirm Username *</label>
<input type="text" id="confirm-username" class="form-input" placeholder="confirm your username" required="required" />
</div>
</div>
<!-- Email -->
<div class="form-group">
<label for="email" class="label-title">Email*</label>
<input type="email" id="email" class="form-input" placeholder="enter your email" required="required">
</div>
<!-- Password and confirm password -->
<div class="horizontal-group">
<div class="form-group left">
<label for="password" class="label-title">Password *</label>
<input type="password" id="password" class="form-input" placeholder="enter your password" required="required">
</div>
<div class="form-group right">
<label for="confirm-password" class="label-title">Confirm Password *</label>
<input type="password" class="form-input" id="confirm-password" placeholder="enter your password again" required="required">
</div>
</div>
</div>
<!-- form footer -->
<div class="form-footer">
<span>Are you already a member? Click here to login!</span>
<button id="submit-button" type="submit" class="btn">Create</button>
</div>
</form>
I am making form and I have some problems validating it.
HTML:
<form id="regForm" class="form-group" method="POST" action="signup.php">
<div class="col-md-12">
<h2>Job Pocket</h2>
</div>
<div class="col-md-12">
<input placeholder="email" class="form-control"type="text" name="email" id="email">
</div>
<div class="col-md-12">
<input placeholder="password" class="form-control" type="password" name="password" id="pass">
</div>
<div class="col-md-12">
<input placeholder="confirm password" class="form-control" type="password" name="confirmpass" id="confirmpass">
</div>
<div class="container">
<div class="row">
<div class="col-md-6">
<input placeholder="first name" class="form-control" type="text" name="first_name" id="first_name">
</div>
<div class="col-md-6">
<input placeholder="last name" class="form-control" type="text" name="last_name" id="last_name">
</div>
</div>
</div>
<div class="col-md-12">
<input type="submit" value="submit" name="submitsignup" id="submit" class="btn btn-primary">
</div>
<hr>
</form>
Javascript:
<script type="text/javascript">
$("#regForm").submit(function(event){
if(document.getElementById("email")=="" || document.getElementById("password") || document.getElementById("last_name") || document.getElementById("first_name"))
return false;
});
</script>
Even with this javascript code added the form still submits to signup.php.
And should I add extre checks in php aswell.
//add return function on it
<form id="regForm" class="form-group" method="POST" action="signup.php">
<div class="col-md-12">
<h2>Job Pocket</h2>
</div>
<div class="col-md-12">
<input placeholder="email" class="form-control"type="text" name="email" id="email">
</div>
<div class="col-md-12">
<input placeholder="password" class="form-control" type="password" name="password" id="pass">
</div>
<div class="col-md-12">
<input placeholder="confirm password" class="form-control" type="password" name="confirmpass" id="confirmpass">
</div>
<div class="container">
<div class="row">
<div class="col-md-6">
<input placeholder="first name" class="form-control" type="text" name="first_name" id="first_name">
</div>
<div class="col-md-6">
<input placeholder="last name" class="form-control" type="text" name="last_name" id="last_name">
</div>
</div>
</div>
<div class="col-md-12">
<input type="button" onclick="return validation()" value="submit" name="submitsignup" id="submit" class="btn btn-primary">
</div>
<hr>
</form>
<script>
public function validation(){
if(document.getElementById("email").value=="" || document.getElementById("password").value="" || document.getElementById("last_name").value="" || document.getElementById("first_name")).value==""{
return false; }
else {
document.getElementById("regForm").submit();
}
}
</script>
or use this
//add required on input it will automatically return message
<form id="regForm" class="form-group" method="POST" action="signup.php">
<div class="col-md-12">
<h2>Job Pocket</h2>
</div>
<div class="col-md-12">
<input placeholder="email" class="form-control"type="text" name="email" id="email" required>
</div>
<div class="col-md-12">
<input placeholder="password" class="form-control" type="password" name="password" id="pass" required>
</div>
<div class="col-md-12">
<input placeholder="confirm password" class="form-control" type="password" name="confirmpass" id="confirmpass" required>
</div>
<div class="container">
<div class="row">
<div class="col-md-6">
<input placeholder="first name" class="form-control" type="text" name="first_name" id="first_name" required>
</div>
<div class="col-md-6">
<input placeholder="last name" class="form-control" type="text" name="last_name" id="last_name" required>
</div>
</div>
</div>
<div class="col-md-12">
<input type="submit" value="submit" name="submitsignup" id="submit" class="btn btn-primary">
</div>
<hr>
</form>
Replace your code with this
if(document.getElementById("email")=="" || document.getElementById("password")=="" || document.getElementById("last_name")=="" || document.getElementById("first_name")=="")
You should only add "required" in the html tag in tags. It'll automatically add display text that the field is required.
Like this:
<input placeholder="last name" class="form-control" type="text" name="last_name" id="last_name" required>
You forgot to add .value to check the values of inputs. Also, you have to use preventDefault in submit function to prevent form submission:
<script type="text/javascript">
$("#regForm").submit(function(event){
if(document.getElementById("email").value == "" || document.getElementById("password").value == "" || document.getElementById("last_name").value == "" || document.getElementById("first_name").value == "")
event.preventDefault();
});
</script>
Since you're using jquery, you can also use its selector:
<script type="text/javascript">
$("#regForm").submit(function(event){
if($("#email").val() == "" || $("#password").val() == "" || $("#last_name").val() == "" || $("#first_name").val() == "")
event.preventDefault();
});
</script>
what about using event.preventDefault() like this:
<script type="text/javascript">
$("#regForm").submit(function(event){
event.preventDefault();
if(document.getElementById("email")=="" || document.getElementById("password")=="" || document.getElementById("last_name")=="" || document.getElementById("first_name")=="")
return false;
});
</script>
I am have a small script written in JS for a form. The script looks like so:
$(document).ready(function() {
// Test for placeholder support
$.support.placeholder = (function(){
var i = document.createElement('input');
return 'placeholder' in i;
})();
// Hide labels by default if placeholders are supported
if($.support.placeholder) {
$('.form-label').each(function(){
$(this).addClass('js-hide-label');
});
// Code for adding/removing classes here
$('.form-group').find('input, textarea').on('keyup blur focus', function(e){
console.log(e);
// Cache our selectors
var $this = $(this),
$parent = $this.parent().find("label");
if (e.type == 'keyup') {
if( $this.val() == '' ) {
$parent.addClass('js-hide-label');
} else {
$parent.removeClass('js-hide-label');
}
}
else if (e.type == 'blur') {
if( $this.val() == '' ) {
$parent.addClass('js-hide-label');
}
else {
$parent.removeClass('js-hide-label').addClass('js-unhighlight-label');
}
}
else if (e.type == 'focus') {
if( $this.val() !== '' ) {
$parent.removeClass('js-unhighlight-label');
}
}
});
}
});
and this is my form in HTML:
<form id="contact-form" class="form" action="#" method="POST" role="form">
<div class="form-group">
<label class="form-label" for="name">Your Name</label>
<input type="text" class="form-control" id="name" name="name" placeholder="Your Name" required>
</div>
<div class="form-group">
<label class="form-label" for="email">Your Email</label>
<input type="email" class="form-control" id="email" name="email" placeholder="Your Email" required>
</div>
<div class="form-group">
<label class="form-label" for="subject">Subject</label>
<input type="text" class="form-control" id="subject" name="subject" placeholder="Subject">
</div>
<div class="form-group">
<label class="form-label" for="message">Message</label>
<textarea rows="5" cols="50" name="message" class="form-control" id="message" placeholder="Message..." required></textarea>
</div>
<div class="text-center">
<button type="submit" class="btn btn-start-order">Send Message</button>
</div>
</form>
This works well, as can be seen here: https://codepen.io/stephanrusu/pen/QwKLJX
I have modified my form to have a <span></span> tags around the input/textarea. In the JS this requires looking for input and textfield inside the span which has class name wpcf7-form-control-wrap. So my HTML looks like this now:
<form id="contact-form" class="form" action="#" method="POST" role="form">
<div class="form-group">
<label class="form-label" for="name">Your Name</label>
<span class="wpcf7-form-control-wrap fullname">
<input type="text" class="form-control" id="name" name="name" placeholder="Your Name" required>
</span>
</div>
<div class="form-group">
<label class="form-label" for="email">Your Email</label>
<span class="wpcf7-form-control-wrap email">
<input type="email" class="form-control" id="email" name="email" placeholder="Your Email" required>
</span>
</div>
<div class="form-group">
<label class="form-label" for="subject">Subject</label>
<span class="wpcf7-form-control-wrap subject">
<input type="text" class="form-control" id="subject" name="subject" placeholder="Subject">
</span>
</div>
<div class="form-group">
<label class="form-label" for="message">Message</label>
<span class="wpcf7-form-control-wrap message">
<textarea rows="5" cols="50" name="message" class="form-control" id="message" placeholder="Message..." required></textarea>
</span>
</div>
<div class="text-center">
<span class="wpcf7-form-control-wrap fullname">
<button type="submit" class="btn btn-start-order">Send Message</button>
</span>
</div>
</form>
So my questions is how can the JS be modified to work with the following form. All that is added is around the inputs and textareas.
Many thanks in anticipation.
In your code, just change the line:
$parent = $this.parent().find("label");
to
$parent = $this.closest(".form-group").find("label");
After update of form, $(this).parent() refers to <span> instead of <label>. $this.closest(".form-group").find("label") will refer correctly to label elements.
I am not able to match the passwords, before Submit is clicked.
The submit goes even if the passwords are different.
var pass1 = document.getElementById('userPassword');
var pass2 = document.getElementById('userRepeatPassword');
function validatePassword(){
if (pass2.value == pass1.value) {
pass2.setCustomValidity('');
} else {
pass2.setCustomValidity('Both passwords do not match');
}
}
pass1.addEventListener('change', validatePassword);
pass2.addEventListener('keyup', validatePassword);
<form method="POST" action="login.php">
<div class="form-group">
<label for="inputFirstName">First name:</label>
<input type="text" class="form-control" name="firstName" id="inputFirstName" required>
</div>
<div class="form-group">
<label for="inputLastName">Last name:</label>
<input type="text" class="form-control" name="lastName" id="inputLastName" required>
</div>
<div class="form-group">
<label for="inputEmail">Email address:</label>
<input type="email" class="form-control" name="email" id="inputEmail" required>
</div>
<div class="form-group">
<label for="inputPassword">Password:</label>
<input type="password" class="form-control" name="userPassword" id="userPassword" required>
</div>
<div class="form-group">
<label for="inputRepeatPassword">Password repeat:</label>
<input type="password" class="form-control" name="userRepeatPassword" id="userRepeatPassword" required>
</div>
<div class="form-actions">
<button type="submit" class="btn btn-primary btn-block" style="background-color: #c2c2c2; color: black; font-weight: bold;">Submit</button>
</div>
</form>
It seems like I miss something, but I am not able to find it whole day already - any thoughts will be appreciated!
The validate should return the validation status and the form's onsubmit event handler should be able to react. Here's the sample:
var pass1 = document.getElementById('userPassword');
var pass2 = document.getElementById('userRepeatPassword');
function validatePassword() {
var status = false;
if (pass2.value == pass1.value) {
status = true;
pass2.setCustomValidity('');
} else {
pass2.setCustomValidity('Both passwords do not match');
}
return status;
}
pass1.addEventListener('change', validatePassword);
pass2.addEventListener('keyup', validatePassword);
<form method="POST" action="login.php" onsubmit="return validatePassword();">
<div class="form-group">
<label for="inputFirstName">First name:</label>
<input type="text" class="form-control" name="firstName" id="inputFirstName" required>
</div>
<div class="form-group">
<label for="inputLastName">Last name:</label>
<input type="text" class="form-control" name="lastName" id="inputLastName" required>
</div>
<div class="form-group">
<label for="inputEmail">Email address:</label>
<input type="email" class="form-control" name="email" id="inputEmail" required>
</div>
<div class="form-group">
<label for="inputPassword">Password:</label>
<input type="password" class="form-control" name="userPassword" id="userPassword" required>
</div>
<div class="form-group">
<label for="inputRepeatPassword">Password repeat:</label>
<input type="password" class="form-control" name="userRepeatPassword" id="userRepeatPassword" required>
</div>
<div class="form-actions">
<button type="submit" class="btn btn-primary btn-block" style="background-color: #c2c2c2; color: black; font-weight: bold;">Submit</button>
</div>
</form>
You have code to display if the passwords are the same or not. However, there is not any code to control how to handle submit with invalid passwords.
Here are two options:
1) <form onSubmit> as described in Pankaj's answer.
2) You could also have your validate function disable your submit button.
(Add an id to your submit <button type="submit" id=submitBtn class="btn btn-primary btn-block" style="background-color: #c2c2c2; color: black; font-weight: bold;">Submit</button>
function validatePassword(){
var submit = document.getElementById('submitBtn');
if (pass2.value == pass1.value) {
pass2.setCustomValidity('');
submit.disabled = false;
} else {
pass2.setCustomValidity('Both passwords do not match');
submit.disabled = true;
}
}
The had to be put in the bottom before the in order to work.
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