Form validation styles not working - javascript

I've been experimenting with JQuery form validation, but haven't been able to get success/failure classes to be added once the validation has been complete.
Here is my code:
https://jsfiddle.net/5WMff/
<form method = "post" id = "signUpForm">
<div class="modal-body">
<div class="form-group">
<label for="firstName">First Name:</label>
<input type="text" class="form-control" name="firstName">
</div>
<div class="form-group">
<label for="surname">Surname:</label>
<input type="text" class="form-control" name="surname" >
</div>
<div class="form-group">
<label for="email">Email address:</label>
<input type="email" class="form-control" name="email">
</div>
<div class="form-group">
<label for="phoneNumber">Phone Number:</label>
<input type="phone" class="form-control" name="phoneNumber">
</div>
<div class="form-group">
<label for="postalCode">Home Postcode:</label>
<input type="text" class="form-control" name="postalCode">
</div>
<div class="checkbox">
<label><input type="checkbox" name = "acceptTCs">Accept Terms and Conditions</label>
</div>
</div>
<div class="modal-footer">
<button type="button" class="btn" data-dismiss="modal">Back</button>
<input type = "submit" name = "submit" class = "btn btn-success btn-large" value = "Submit" ></button>
</div>
</form>
JS:
$(document).ready(function () {
$('#signUpForm').validate({
rules: {
firstName: {
minlength: 2,
required: true
},
surname: {
required: true,
email: true
},
email: {
minlength: 2,
required: true
},
phoneNumber: {
minlength: 7,
required: true
}
},
highlight: function (element) {
$(element).closest('.form-group').removeClass('success').addClass('error');
},
success: function (element) {
element.text('OK!').addClass('valid')
.closest('.form-group').removeClass('error').addClass('success');
}
});
});
The validation (OK vs. more info required) is working fine, it's just failing to add the success/failure class as well. I know it's something obvious I've missed out, but have come to a bit of a dead end.
The effect I'm looking for is like here: http://jsfiddle.net/5WMff/
Thanks.

$.validator.setDefaults({
submitHandler: function() {
alert("submitted!");
}
});
Use submitHandler . Hope this will help you.

Related

jQuery validation for minimum and maximum length is not working with Bootstrap 4

I cannot get the jQuery plugin to validate minlength and maxlength. I cannot see the error message that the minimum length or maximum length as I specify. The contact form and the jQuery code of the contact form are as follows:
The contact form:
<form id="contactForm" class="contact-form" action="form.php" method="POST">
<div class="contact-form-success alert alert-success d-none mt-4" id="contactSuccess">
<strong>Success!</strong> Message sent!.
</div>
<div class="contact-form-error alert alert-danger d-none mt-4" id="contactError">
<strong>Error!</strong> There was an error.
<span class="mail-error-message text-1 d-block" id="mailErrorMessage"></span>
</div>
<div class="form-row">
<div class="form-group col-lg-6">
<label class="required font-weight-bold text-dark">Name</label>
<input type="text" value="" data-msg-required="Please enter your name." maxlength="100" class="form-control" name="name" id="name" required>
</div>
<div class="form-row">
<div class="form-group col">
<label class="font-weight-bold text-dark">Phone</label>
<input type="text" value="" data-msg-required="Please enter your phone number." maxlength="100" class="form-control" name="subject" id="subject" required>
</div>
</div>
<div class="form-group col-lg-6">
<label class="required font-weight-bold text-dark">Email</label>
<input type="email" value="" data-msg-required="Please enter your email address." data-msg-email="Please enter a valid email address." maxlength="100" class="form-control" name="email" id="email" required>
</div>
</div>
<div class="form-row">
<div class="form-group col">
<input type="submit" value="Send Message" class="btn btn-primary btn-modern" data-loading-text="Loading...">
</div>
</div>
</form>
<script src="js/jquery.validate.min.js"></script>
<script src="js/jquery.validate.js"></script>
<script src="js/additional-methods.js"></script>
Jquery and Javascripts links:
<script>
jQuery(function ($) {
$("#contactForm").validate({
errorClass: "error fail-alert",
validClass: "valid success-alert",
rules: {
name : {
required: true,
minlength: 3
},
phone: {
required: true,
number: true,
minlength: 8
},
email: {
required: true,
email: true
},
}
});
});
</script>
<script>
// Example starter JavaScript for disabling form submissions if there are invalid fields
(function() {
'use strict';
window.addEventListener('load', function() {
// Fetch all the forms we want to apply custom Bootstrap validation styles to
var forms = document.getElementsByClassName('needs-validation');
// Loop over them and prevent submission
var validation = Array.prototype.filter.call(forms, function(form) {
form.addEventListener('submit', function(event) {
if (form.checkValidity() === false) {
event.preventDefault();
event.stopPropagation();
}
form.classList.add('was-validated');
}, false);
});
}, false);
})();
</script>
Validation works, but minimum and maximum length are not working, and the error messages do not capture that; alternatively, it gives me a green tick (i.e., validated). I am not sure what is the reason for that.

validate form then open mail program

Is there away to validate a form in js and if its valid execute a js function?
basiclly it should check if the form is valid then open the default email program with some entries
like so ->
Yes you can
$('#loginform').validate({
rules: {
email: {
required: true,
email: true,
maxlength: 30
},
password: {
required: true,
minlength: 8,
maxlength: 20,
}
},
submitHandler: function(form) { // for demo
return false; // for demo
}
});
$("#submit").click(function() {
if ($('#loginform').valid()) {
alert("Open mail program");
}
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-validate/1.19.2/jquery.validate.min.js" integrity="sha256-+BEKmIvQ6IsL8sHcvidtDrNOdZO3C9LtFPtF2H0dOHI=" crossorigin="anonymous"></script>
<form id="loginform">
<div class="form-group">
<input class="form-control form-control-lg" id="email"
name="email" type="text" placeholder="Email" autocomplete="off">
</div>
<div class="form-group">
<input class="form-control form-control-lg" id="password" name="password"
type="password" placeholder="Password">
</div>
<button type="button" id="submit" class="btn btn-primary btn-lg btn-block">Login </button>
</form>

Form fields are not getting blank/reset when we click outside of the form

When we write something in the input field and then dont want to submit the form we click outside the form box but the form fields are not getting blank. I want them to get reset to the blank fields when open the form without refreshing the webpage.
Ps: The form is a popup form
Code for the form:
$(function(){
$("#schedule-demo").validate({
rules: {
firstname: 'required',
lastname: 'required',
email: {
required: true,
email: true,
},
phone : { required: true, minlength: 7 }
},
submitHandler: function(form, event) {
submitInformationForm(form);
event.preventDefault();
return false;
}
});
})
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-validate/1.19.0/jquery.validate.min.js"></script>
<form id="schedule-demo" hubspot-form-id="5bd0f54b-4329-40dd-973e-f1fedce07775">
<p>Please provide us your contact information and the expert will reach out shortly.</p>
<div class="form-group">
<label for="demo-first-name">First Name *</label>
<input type="text" name="firstname" class="form-control" id="demo-first-name">
</div>
<div class="form-group">
<label for="demo-last-name">Last Name *</label>
<input type="text" name="lastname" class="form-control" id="demo-last-name">
</div>
<div class="form-group">
<label for="demo-email">Work Email *</label>
<input type="email" name="email" class="form-control" id="demo-email">
</div>
<div class="form-group">
<label for="demo-phone">Phone Number *</label>
<input type="text" name="phone" class="form-control" id="demo-phone">
</div>
<div class="button-group">
<button class="btn btn-primary btn-lg btn-block" type="submit">Submit</button>
</div>
</form>
You can create a js function that u can call with a button for example, and this resets all form inputs.
<button class="button" type="button" onclick="Reset();">Reset</button>
function Reset() {
document.getElementById("schedule-demo").reset();
}
"... we click outside the form box but the form fields are not getting blank."
If you want to clear out the form when you click outside the form box, you could write an event handler that resets the form when you click outside of it.
$(document).on('click', function(e) {
var container = $('#schedule-demo');
if (!container.is(e.target) && container.has(e.target).length === 0) {
$(container).validate().resetForm();
$(container).get(0).reset();
};
});
The .resetForm() is provided by the jQuery Validate plugin to reset all validation. The .get(0).reset() will clear out the form's contents.
$(function() {
$("#schedule-demo").validate({
rules: {
firstname: 'required',
lastname: 'required',
email: {
required: true,
email: true,
},
phone: {
required: true,
minlength: 7
}
},
submitHandler: function(form) {
// submitInformationForm(form); // commented out for demo
return false;
}
});
$(document).on('click', function(e) {
var container = $('#schedule-demo');
if (!container.is(e.target) && container.has(e.target).length === 0) {
$(container).validate().resetForm();
$(container).get(0).reset();
};
});
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-validate/1.19.0/jquery.validate.min.js"></script>
<form id="schedule-demo" hubspot-form-id="5bd0f54b-4329-40dd-973e-f1fedce07775">
<p>Please provide us your contact information and the expert will reach out shortly.</p>
<div class="form-group">
<label for="demo-first-name">First Name *</label>
<input type="text" name="firstname" class="form-control" id="demo-first-name">
</div>
<div class="form-group">
<label for="demo-last-name">Last Name *</label>
<input type="text" name="lastname" class="form-control" id="demo-last-name">
</div>
<div class="form-group">
<label for="demo-email">Work Email *</label>
<input type="email" name="email" class="form-control" id="demo-email">
</div>
<div class="form-group">
<label for="demo-phone">Phone Number *</label>
<input type="text" name="phone" class="form-control" id="demo-phone">
</div>
<div class="button-group">
<button class="btn btn-primary btn-lg btn-block" type="submit">Submit</button>
</div>
</form>
<button>click outside of container</button>
As a side note...
submitHandler: function(form, event) {
submitInformationForm(form);
event.preventDefault();
return false;
}
Using preventDefault() inside of your submitHandler function is completely pointless as the plugin developer does not provide a default event to prevent.
submitHandler: function(form) {
submitInformationForm(form);
return false;
}

jQuery Validation not getting options

I'm trying to customise my form validation with no success.
Nor message nor custom error class is firing when I test. Still, it seems to work, since it shows the standard error message after the invalid field.
My code:
HTML
<form role="form" method="POST" id="account-edit">
<div class="box-body">
<div class="form-group">
<label for="address">Address</label>
<input type="text" class="form-control" id="address" name="address" placeholder="Endereço">
</div>
<div class="form-group">
<label for="telephone">Telephone</label>
<input type="text" class="form-control" id="telephone" name="telephone" placeholder="Telefone">
</div>
<div class="form-group">
<label for="telephone">Contact-email</label>
<input type="email" class="form-control" id="email" name="contact_email" placeholder="E-mail">
</div>
<div class="form-group">
<label for="telephone">Website</label>
<input type="text" class="form-control" id="website" name="website" placeholder="Website" >
</div>
</div>
<div class="box-footer">
<button type="submit" class="btn btn-primary">Update Info</button>
</div>
</form>
Javascript:
$('#account-edit').validate({
errorClass: "has-error",
rules: {
email: {
email: true
}
},
messages: {
email: {
email: 'Please enter a valid email format: name#domain'
}
},
highlight: function(element, errorClass) {
$(element).closest('.control-group').addClass(errorClass);
},
unhighlight: function(element, errorClass) {
$(element).closest('.control-group').removeClass(errorClass);
}
});
CSS:
.has-error input {
border: 1px solid red;
}
A JSFiddle with my code: http://jsfiddle.net/ov8zx694/1/
Also, I managed to customize the error message through data-attributes.
The rules object can only be constructed using the name attribute. In your case, the name is contact_email, not email...
rules: {
contact_email: {
email: true
}
},
messages: {
contact_email: {
email: 'Please enter a valid email format: name#domain'
}
},
DEMO: http://jsfiddle.net/ov8zx694/2/
Also, the CSS is not working because you don't have any markup that contains the control-group class.
$(element).closest('.control-group').addClass(errorClass);
Either change the markup so that it contains this class or change the class name to something that's already in your markup...
$(element).closest('.form-group').addClass(errorClass);
DEMO 2: http://jsfiddle.net/ov8zx694/3/

JQuery Validation matching fields

I am developing a project with a registration form. I have 2 email fields as well as 2 password fields, each need to match each other. I am using JQuery validate and Bootstrap in an ASP.NET MVC 4 (C#) framework. Even if they are matching, the fields are getting the error that they do not match.
HTML
Registration Form
<div class="row">
<form id="formRegister" class="form-horizontal col-xs-5">
<div class="form-group">
<label for="textFirstName" class="control-label col-xs-2">First name</label>
<div class="col-xs-4">
<input type="text" name="textFirstName" class="form-control" />
</div>
<div class="col-xs-6"></div>
</div>
<div class="form-group">
<label for="textLastName" class="control-label col-xs-2">Last name</label>
<div class="col-xs-4">
<input type="text" name="textLastName" class="form-control" />
</div>
<div class="col-xs-6"></div>
</div>
<div class="form-group">
<label for="textEmail" class="control-label col-xs-2">Email</label>
<div class="col-xs-4">
<input type="text" name="textEmail" class="form-control" />
</div>
<div class="col-xs-6"></div>
</div>
<div class="form-group">
<label for="textEmail2" class="control-label col-xs-2">Reenter email</label>
<div class="col-xs-4">
<input type="text" name="textEmail2" class="form-control" />
</div>
<div class="col-xs-6"></div>
</div>
<div class="form-group">
<label for="passwordPW1" class="control-label col-xs-2">Password</label>
<div class="col-xs-4">
<input type="password" name="passwordPW1" class="form-control" />
</div>
<div class="col-xs-6"></div>
</div>
<div class="form-group">
<label for="passwordPW2" class="control-label col-xs-2">Reenter Password</label>
<div class="col-xs-4">
<input type="password" name="passwordPW2" class="form-control" />
</div>
<div class="col-xs-6"></div>
</div>
<div class="form-group">
<div class="btn-group col-xs-offset-2 col-xs-5">
<button type="submit" class="btn btn-info">Submit</button>
<button type="reset" class="btn btn-info">Clear</button>
</div>
</div>
</form>
</div>
JS
jQuery(function ($) {
$('#formRegister').validate({
errorElement: "div",
errorPlacement: function(error, element) {
error.appendTo(element.parent("div").next("div"));
},
rules: {
textFirstName: {
required: true,
minlength: 1,
maxlength: 50
},
textLastName: {
required: false,
maxlength: 50
},
textEmail: {
required: true,
email: true
},
textEmail2: {
equalTo: "#textEmail"
},
passwordPW1: {
required: true,
minlength: 4
},
passwordPW2: {
equalTo: "#passwordPW1"
}
},
messages: {
textFirstName: "The first name must be from 1 to 50 characters in length",
textLastName: "The last name must be from 0 to 50 characters in length",
textEmail: "Please enter a valid email address",
textEmail2: "Emails do not match",
passwordPW1: "The password must be from 4 to 50 characters in length",
passwordPW2: "Passwords do not match"
},
highlight: function (element) {
$(element).closest('next').removeClass('success').addClass('error');
},
success: function (element) {
element.text('OK!').addClass('valid')
.closest('.next').removeClass('error').addClass('success');
},
submitHandler: function (form) {
form.submit();
}
});
});
Your problem is that you're referring to selectors that don't match anything. For instance, #textEmail (used in the equalTo property) won't match anything in your current DOM.
Replace this line:
<input type="text" name="textEmail" class="form-control" />
With this line:
<input type="text" id="textEmail" name="textEmail" class="form-control" />
Alternatively, you can use a different selector in your equalTo property:
// ...
rules: {
// ...
textEmail2: {
equalTo: "[name=textEmail]"
},
// ...
Your validation for equalTo currently is
textEmail2: {
equalTo: "#textEmail"
}
but the input textEmail has no id="textEmail". Try to add this id and it should work then.
The same applies to other validation rules where you match against ids that are not yet added at the inputs.
I don't know anything about .asp.net and bootstrap, but
in your form, you are using the name tag, while in your javascript,
you are using a #, which refers to an ID.
Give your input an the id textEmail and passwordPW1

Categories