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.
Related
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>
Trying to target only parent divs that have child with class="has-error"
I'm using the following, but scope inside of conditional is referring to #pdf-form. Please advise how to fix.
JS:
$( "#pdf-form" ).submit(function( event ) {
if ($(".form-control").hasClass("has-error")) {
$(this).parent().addClass('has-error');
}
event.preventDefault();
});
HTML:
<form action="http://example.com" accept-charset="utf-8" id="pdf-form" enctype="multipart/form-data" method="post" novalidate="novalidate">
<div style="display:none">
<input type="hidden" name="params_id" value="363">
<input type="hidden" name="csrf_token" value="668186205c07bd680af53ba2f5f05ca78143a43d">
</div>
<div class="form-group">
<label for="email" class="control-label">Email</label>
<input type="text" name="email" value="" id="freeform_email" maxlength="150" class="form-control has-error" required="" aria-required="true" aria-describedby="freeform_email-error" aria-invalid="true">
<div id="freeform_email-error" class="has-error">Please Enter a Valid Email Address</div>
</div>
<div class="form-group">
<label for="first_name" class="control-label">Name</label>
<div class="row">
<div class="col-sm-6">
<input type="text" name="first_name" value="" id="freeform_first_name" maxlength="150" class="form-control" placeholder="Your first name">
</div>
<div class="clearfix visible-xs" style="height: 10px;"></div>
<div class="col-sm-6">
<input type="text" name="last_name" value="" id="last_name" maxlength="150" class="form-control" placeholder="Your last name">
</div>
</div>
</div>
<div class="form-group hidden">
<label class="control-label">report</label>
<input type="file" name="report[0]" value="" id="freeform_report0">
</div>
<input type="hidden" name="pdf_press_entries" value="77|8">
<input type="hidden" name="pdf_press_template" value="site/email_pdf_report">
<input type="hidden" name="pdf_press_upload_fieldname" value="report">
<input type="hidden" name="pdf_press_filename_fieldname" value="report_filename">
<p><input type="submit" name="submit" value="Submit" class="btn btn-primary"></p>
</form>
It's still unclear exactly what you are looking for. I suspect your initial setup is not quite correct, but this should give you an idea of how to access the parent elements that contain error controls.
It won't work here in the Stack Overflow snippet environment, because they disable submit events, but you can see it working here. I added an additional class to illustrate what is getting selected when you click submit.
$( "#pdf-form" ).submit(function( event ) {
var $errorElements = $(".form-control.has-error");
$errorElements.parent().addClass('added-error');
// If there are error elements, don't submit the form
$errorElements.length > 0 ? event.preventDefault() : "";
});
.has-error { background:red; }
.added-error { border:2px solid black; }
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form action="http://example.com" accept-charset="utf-8" id="pdf-form" enctype="multipart/form-data" method="post" novalidate="novalidate">
<div style="display:none">
<input type="hidden" name="params_id" value="363">
<input type="hidden" name="csrf_token" value="668186205c07bd680af53ba2f5f05ca78143a43d">
</div>
<div class="form-group">
<label for="email" class="control-label">Email</label>
<input type="text" name="email" value="" id="freeform_email" maxlength="150" class="form-control has-error" required="" aria-required="true" aria-describedby="freeform_email-error" aria-invalid="true">
<div id="freeform_email-error" class="has-error">Please Enter a Valid Email Address</div>
</div>
<div class="form-group">
<label for="first_name" class="control-label">Name</label>
<div class="row">
<div class="col-sm-6">
<input type="text" name="first_name" value="" id="freeform_first_name" maxlength="150" class="form-control" placeholder="Your first name">
</div>
<div class="clearfix visible-xs" style="height: 10px;"></div>
<div class="col-sm-6">
<input type="text" name="last_name" value="" id="last_name" maxlength="150" class="form-control" placeholder="Your last name">
</div>
</div>
</div>
<div class="form-group hidden">
<label class="control-label">report</label>
<input type="file" name="report[0]" value="" id="freeform_report0">
</div>
<input type="hidden" name="pdf_press_entries" value="77|8">
<input type="hidden" name="pdf_press_template" value="site/email_pdf_report">
<input type="hidden" name="pdf_press_upload_fieldname" value="report">
<input type="hidden" name="pdf_press_filename_fieldname" value="report_filename">
<p><input type="submit" name="submit" value="Submit" class="btn btn-primary"></p>
</form>
To cancel the submit it appears, based on your example, that you need to detect if any form-control elements have the has-error class. Then, to set the has-error on the class on the parents of those form-control elements you need to use the .each() approach instead of the if you have tried.
Something like this:
$( "#pdf-form" ).submit(function( event ) {
if ($(".form-control").hasClass("has-error").length > 0){
event.preventDefault();
}
$(".form-control").hasClass("has-error").each(function() {
$(this).parent().addClass('has-error');
}
});
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.
What I am trying to achieve is that if user clicks on close button a function Exit is triggered which displays a form before user leaves the website.But my form is not getting displayed
Javascript
<script type="text/javascript">
window.onbeforeunload = Exit;
function Exit()
{
setTimeout(function() {
setTimeout(function() {
document.getElementById('form').style.display="block";
window.location.href="register.html";
}, 1000);
},1);
return "Message";
}
</script>
Html code
<div class="container">
<form role="form" id="form" method="post" action="register.php" style="display:none">
<div class="form-group">
<label for="username">Name:</label>
<input type="text" name="username" class="form-control" id="username" placeholder="Enter name">
</div>
<div class="form-group">
<label for="email">Email:</label>
<input type="email" name="email" class="form-control" id="email" placeholder="Enter email">
</div>
<div class="form-group">
<label for="phone">Phone Number:</label>
<input type="number" name="phone" class="form-control" id="phone" placeholder="Enter phonenumber">
</div>
<div class="form-group">
<label for="reason">Reason to leave:</label>
<textarea class="form-control" name="reason" rows="5" id="comment"></textarea>
</div>
<button type="submit" name="submit" class="btn btn-default">Submit</button>
</form>
</div>
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