We Keep Coding

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.

How to show error message from ajax response of api?

i have sent api request using jquery ajax i am getting ajax response like this
Array ( [consumer_key] => ada691a715307861907d65d36d [consumer_secret] => a75e40ec1530786190b62316d1 [consumer_nonce] => 1537011049789 [consumer_device_id] => ldx0EWMCl3hNhJWCRIdPVveLy [consumer_url] => processregistration ) {"success":"0","data":[],"message":"Email address is already exist"}
i would like to show error message if response contains "Email address is already exist" otherwise alert Message shuold be successfully submitted
$.validator.setDefaults({
submitHandler: function() {
alert("submitted!");
var customers_firstname=$("#customers_firstname").val();
var customers_lastname=$("#customers_lastname").val();
var customers_telephone=$("#customers_telephone").val();
var email=$("#email").val();
var d = new Date();
var consumer_nonce = d.getTime();
U=url+'api/save_reg';
//alert(consumer_nonce);
//exit;
//var ul="{{ url('/backend/api/save_reg') }}";
$.ajax({
type:"POST",
url:url+'api/save_reg',
data:$("#postcontent").serialize(),
/* data:{
customers_firstname:customers_firstname,
customers_lastname:customers_lastname,
customers_telephone:customers_telephone,
email:email,
password:password
},*/
headers: {
"consumer-key": consumer_key,
"consumer-secret": consumer_secret,
"consumer-nonce": consumer_nonce,
"consumer-device-id": consumer_device_id,
},
beforeSend:function(){
$(".post_submitting").show().html("<center><img src='https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/0.16.1/images/loader-large.gif'/></center>");
},success:function(response){
alert(response);
//-- alert(response[1]);
//alert(response);
//response = response.toJSON();
//alert(response);
$("#return_update_msg").html(response);
$(".post_submitting").fadeOut(1000);
}
});
}
});
#extends('frontend.layouts.app')
#section('title','Home')
#section('body')
<!-- Main Container -->
<div class="main-container container">
<ul class="breadcrumb">
<li><i class="fa fa-home"></i></li>
<li>Account</li>
<li>Register</li>
</ul>
<div class="row">
<div id="content" class="col-sm-12">
<h2 class="title">Register Account</h2>
<p>If you already have an account with us, please login at the login page.</p>
<div id="return_update_msg" class="return_update_msg">j</div>
<div class="post_submitting"></div>
<form name="postcontent" class="cmxform" id="postcontent" >
<fieldset id="account">
<legend>Your Personal Details</legend>
<div class="form-group required">
<label class="col-sm-2 control-label" for="customers_firstname">First Name</label>
<div class="col-sm-10">
<input type="text" name="customers_firstname" minlength="2" placeholder="First Name" id="customers_firstname" class="form-control">
<span id="customers_firstname_error"></span>
</div>
</div>
<div class="form-group required">
<label class="col-sm-2 control-label" for="customers_lastname">Last Name</label>
<div class="col-sm-10">
<input type="text" name="customers_lastname" minlength="2" placeholder="Last Name" id="customers_lastname" class="form-control">
<span id="customers_lastname_error"></span>
</div>
</div>
<div class="form-group required">
<label class="col-sm-2 control-label" for="email">E-Mail</label>
<div class="col-sm-10">
<input type="email" name="email" placeholder="E-Mail" id="email" class="form-control">
<span id="email_error"></span>
</div>
</div>
<div class="form-group required">
<label class="col-sm-2 control-label" for="input-telephone">Mobile Number</label>
<div class="col-sm-10">
<input type="tel" name="customers_telephone" placeholder="Telephone" id="customers_telephone" class="form-control">
<span id="customers_telephone_error"></span>
</div>
</div>
</fieldset>
<fieldset>
<legend>Your Password</legend>
<div class="form-group required">
<label class="col-sm-2 control-label" for="password">Password</label>
<div class="col-sm-10">
<input type="password" name="password" placeholder="Password" id="password" class="form-control">
<span id="password_error"></span>
</div>
</div>
<div class="form-group required">
<label class="col-sm-2 control-label" for="confirm_password">Password Confirm</label>
<div class="col-sm-10">
<input type="password" name="confirm_password" placeholder="Password Confirm" id="confirm_password" class="form-control">
<span id="password_confirm_error"></span>
</div>
</div>
</fieldset>
<span id="success_message"></span>
<div class="buttons">
<input class="submit btn btn-primary" id="save_buttonk" type="submit" value="Submit">
<!--<input type="submit" id="save_button" value="Continue" class="btn btn-primary">-->
</div>
</form>
</div>
</div>
</div>
<br />
<!-- //Main Container -->
#endsection
#section('pagescript')
<script type="text/javascript" src="{{ asset('public/frontend/qshopee')}}/js/registration.js"></script>
<script>
$().ready(function() {
// validate the comment form when it is submitted
$("#commentForm").validate();
// validate signup form on keyup and submit
$("#postcontent").validate({
rules: {
//customers_firstname: "required",
//customers_lastname: "required",
/*username: {
required: true,
minlength: 2
},*/
customers_firstname: {
required: true,
minlength: 2
},
customers_lastname: {
required: true,
minlength: 2
},
password: {
required: true,
minlength: 5
},
confirm_password: {
required: true,
minlength: 5,
equalTo: "#password"
},
email: {
required: true,
email: true
},
/*topic: {
required: "#newsletter:checked",
minlength: 2
},
agree: "required"*/
},
messages: {
//customers_firstname: "Please enter your firstname",
//customers_lastname: "Please enter your lastname",
/*username: {
required: "Please enter a username",
minlength: "Your username must consist of at least 2 characters"
},*/
customers_firstname: {
required: "Please enter a firstname",
minlength: "Your firstname must consist of at least 2 characters"
},
customers_lastname: {
required: "Please enter a lastname",
minlength: "Your lastname must consist of at least 2 characters"
},
password: {
required: "Please provide a password",
minlength: "Your password must be at least 5 characters long"
},
confirm_password: {
required: "Please provide a password",
minlength: "Your password must be at least 5 characters long",
equalTo: "Please enter the same password as above"
},
email: "Please enter a valid email address"
/*agree: "Please accept our policy",
topic: "Please select at least 2 topics"*/
}
});
});
</script>
#stop

try
if (response.indexOf('Email address is already exist') > -1)
{
alert("Email Already Registered");
}
else
{
alert("Registration Successful");

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/

Form validation using Jquery onclick button

I have written a validation code for my form in jQuery. Everything seems to be correct, but it doesn't work. Help me!
HTML FORM:
<form role="form" name="form1" id="form1">
<div class="form-group">
<label for="usr">Contact Name</label>
<input type="text" name="usr" class="form-control" id="usr" placeholder="Full Name">
</div>
<div class="form-group">
<label for="pwd">Company Name</label>
<input type="text" class="form-control" id="pwd" placeholder="Company Name">
</div>
<div class="form-group">
<label for="eml">Email</label>
<input type="email" class="form-control" id="eml" placeholder="Email">
</div>
<div class="form-group">
<label for="phn">Contact Number</label>
<input type="number" class="form-control" id="phn" placeholder="98689-98689">
</div>
<div class="form-group">
<label for="comment">Remarks</label>
<textarea class="form-control" rows="3" id="comment"></textarea>
</div>
<button id="submtbtn" style="height:30px ; width:60px; padding: 5px 5px;" type="button" class="btn btn-info" onClick="AddNew(); this.form.reset()">Insert</button>
<button style="height:30px ; width:60px; padding: 5px 5px;" type="button" class="btn btn-info" onClick="this.form.reset()">Clear</button>
<button id="cnclbtn" style="height:30px ; width:60px; padding: 5px 5px; background-color: #f1f1f1; " type="button" class="btn btn-default">Cancel</button>
</form>
Here is the validation script:
$(document).ready(function () {
$("#form1").validate({
rules: {
usr: "required",
pwd: "required",
eml: {
required: true,
email: true
},
phn: {
required: true,
minlength: 10
}
},
messages: {
usr: "Please enter your first name",
pwd: "Please enter your last name",
eml: {
required: "Please provide Email address ",
email: "Please enter valid Email address"
},
phn: {
required: "Please provide a Phone Number",
minlength: "Your Phone Number must be 10 digits"
}
}
});
$("#submtbtn").click(function () {
$("#form1").valid();
});
});
Please point out the error. Thank you.
JSFiddle https://jsfiddle.net/cherry1993/vwo0r0h6/

In your jsFiddle, after removing the <script> and </script> tags from the JavaScript pane, and including jQuery and the jQuery Validate plugin, it started working... but only for the usr field.
https://jsfiddle.net/vwo0r0h6/2/
It does not work on any of the other fields because you forgot to include a name attribute on those input elements. This plugin only uses the name attribute, not the id, to keep track of the form inputs.
<input type="text" class="form-control" name="pwd" placeholder="Company Name">
Working DEMO: https://jsfiddle.net/vwo0r0h6/3/
Bonus:
You don't need to worry wether the value within your custom message matches the rule's parameter. Simply use the parameter's placeholder, {0}, within the custom message and its value will get entered dynamically. See working demo above.
minlength: "Your Phone Number must be {0} digits"

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