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.

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;
}

Detect the name of required field and not validated when submit a form

I create a form in html5 like this example :
<form action="/my/url/insert.php" method="POST">
<div class="row">
name <input name="name" required/>
</div>
<div class="row">
type <input name="type" required/>
</div>
<div class="row">
year <input name="year" required/>
</div>
....
<div class="row">
album <input name="album" required/>
</div>
<div class="row">
<input type="submit" value="Save"/>
</div>
</form>
<script>
$('form').submit(function(){
console.log('test');
});
</script>
The problem :
I want to detect the name of the required field that are not validated when submiting and logging it.
for example : if I don't fill the input "album" when submit i detect it before the message "a field is required..."
is there a way to do this ?
thank you.

Here you go.. Loop through each input:required field and get its name with .attr.
$('form').submit(function(e) {
e.preventDefault();
$(this).find('input:required').each(function(){
console.log($(this).attr('name'));
})
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form action="/my/url/insert.php" method="POST">
<div class="row">
name
<input name="name" required/>
</div>
<div class="row">
type
<input name="type" required/>
</div>
<div class="row">
year
<input name="year" required/>
</div>
....
<div class="row">
album
<input name="album" required/>
</div>
<div class="row">
<input type="submit" value="Save" />
</div>
</form>
Updated
$('form').submit(function(e) {
e.preventDefault();
$(this).find('input:required').each(function(){
if($(this).val()==""){ //check if its empty
console.log($(this).attr('name'));
}
})
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form novalidate action="/my/url/insert.php" method="POST">
<div class="row">
name
<input name="name" required/>
</div>
<div class="row">
type
<input name="type" required/>
</div>
<div class="row">
year
<input name="year" required/>
</div>
....
<div class="row">
album
<input name="album" required/>
</div>
<div class="row">
<input type="submit" value="Save" />
</div>
</form>
Assuming that only required will be the property for validation, above condition will hold good and yea, by default when you say required, browser will have its validation suppressing validation written by you. If you want your validation to work, add novalidate to form as said in one of the comments above..

Select them by property required:
$(function() {
$('form').submit(function(){
$("input:required", $(this)).each(function() {
console.log($(this).attr("name"));
});
});
});
To do a simple required check on your own make a simple "not empty" condition. But for this, your form need the novalidate class, otherwise submit callback will not be triggered and nothing ever happens.
$(function() {
$('form').submit(function(){
$("input:required", $(this)).each(function() {
if( $(this).val() != "" )
console.log($(this).attr("name"));
});
});
});
Full example here: https://jsfiddle.net/vvdh66rb/

You can also do like this:
<form action="/my/url/insert.php" method="POST" onSubmit="return myFunction()">
<div class="row">
<!--I am only giving id to one to show an exmaple you can give to differnt-->
name <input name="name" id="some" required/>
</div>
<div class="row">
type <input name="type" required/>
</div>
<div class="row">
year <input name="year" required/>
</div>
....
<div class="row">
album <input name="album" required/>
</div>
<div class="row">
<input type="submit" value="Save"/>
</div>
</form>
<script>
function myFunction() {
var x = document.getElementById('some').value;
if (x == "" || x == null) {
alert('sadsd');
return false;
//You can give anything else than alert
}
}

My Jquery button- disable/enable function is not working. Can anyone tell me what's wrong?

I'm trying to disable submit button until first two fields have input. I've written a function to do that but for some reason it's not working.
Here is my HTML:
<html>
<Head>
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap.min.css">
<script src="http://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script type="text/javascript" src="Stuff.js"></script>
</Head>
<body>
<div class="container">
<form role="form">
<div class="form-group has-error">
<label for="FirstName">First Name</label>
<input type="text" class="form-control" id="First" placeholder="First Name">
</div>
<div class="form-group">
<label for="LastName">Last Name</label>
<input type="text" class="form-control" id="Last" placeholder="Last Name">
</div>
<div class="form-group">
<label for="Age">Age</label>
<input type="text" class="form-control" id="Age" placeholder="Age">
</div>
<button type="submit" class="btn btn-default" id="submit" >Submit</button>
</form>
</div>
</body>
This is my function:
$('#submit').keyup(function () {
if ($('#First').val() != "" && $('#Last').val() != "") {
$('#submit').removeattr('disabled');
} else {
$('#submit').attr('disabled', true);
}
});

You could use something like this:
$('#First, #Last').keyup(function () {
if ($('#First').val() !== "" && $('#Last').val() !== "") {
$('#submit').prop('disabled', false);
} else {
$('#submit').prop('disabled', true);
}
});
Note that you need to check the fields themselves upon keyup.
Also, use prop() to set the underlying boolean property of the disabled attribute to true/false, instead of removing it completely - see here for why.
jsFiddle here.

How to perform client-side form-validation on password

I am doing a simple sign-up page. For the password stuff, I need to check the new password and confirmed password are the same but no idea how
<div class="row">
<!--New Username-->
<div class="large-4 columns form-text">New Username</div>
<div class="large-8 columns">
<div class="input-icon font-awesome"></div><input type="text" class="form-input" name="username" required>
</div>
</div>
<br/>
<div class="row">
<!--New email-->
<div class="large-4 columns form-text">Email</div>
<div class="large-8 columns">
<div class="input-icon font-awesome"></div><input type="email" class="form-input" name="email" pattern="[a-zA-Z]*#[a-zA-Z]*" required>
</div>
</div>
<br/>
<div class="row">
<!--New Passwrord-->
<div class="large-4 columns form-text">New Password</div>
<div class="large-8 columns">
<div class="input-icon font-awesome"></div><input type="password" class="form-input" name="password" required>
</div>
</div>
<br/>
<div class="row">
<!--Reconfirm new password-->
<div class="large-4 columns form-text">Re-enter Password</div>
<div class="large-8 columns">
<div class="input-icon font-awesome"></div><input type="password" class="form-input" name="password-confirm" required>
</div>
</div>

That's quite a bit of code, but I broke out an example on a fiddle.
Simplified HTML:
<form id="passwordForm" action="#" method="POST">
Password:<br>
<input type="password" id="password"><br>
Confirm Password:<br>
<input type="password" id="confirmPassword"><br>
<input type="submit" id="submitButton" value="Check 'Em">
</form>
<div id="responseDiv"></div>
I used jQuery:
$(document).ready(function () {
$("#submitButton").click(function (e) {
e.preventDefault();
var matched,
password = $("#password").val(),
confirm = $("#confirmPassword").val();
matched = (password == confirm) ? true : false;
if(matched) {
//Submit line commented out for example. In production, remove the //
//$("#passwordForm").submit();
//Shows success message and prevents submission. In production, comment out the next 2 lines.
$("#responseDiv").html("Passwords Match");
return false;
}
else {
$("#responseDiv").html("Passwords don't match...");
return false;
}
});
});
Many times new learners will forget the e.preventDefault(); Without it, the form will submit regardless of any validation. Return false if there is something wrong, and the form will not submit.
There is an event listener on the submit button. If it is clicked, or the enter key is pressed will focused in the form, it will run the validation. If everything is fine, it will post the information to the URL in the action attribute of the form tag.
Another important point is to always re-validate on the server side. If a user has their Javascript turned off the form will post the information regardless of what is in your validation script.

with normal javascript, just adapt to your source code:
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<script>
function pass() {
var pass_1 = document.forms["myForm"].pass_1.value.length;
var pass_2 = document.forms["myForm"].pass_2.value.length;
if (pass_1 != pass_2) {
alert("the pass and repeat pass must be equal");
return false;
}
return true;
}
</script>
</head>
<body>
<form method="post" action="" name="myForm" onSubmit="pass(); return false;">
<input type="password" placeholder="type your pass" name="pass_1">
<input type="password" placeholder="confirm your pass" name="pass_2">
<input type="submit" value="validate">
</form>
</body>
</html>
the same code above but with the redirect: http://jsfiddle.net/m7BrM/
option 2 use a plugin:
http://www.technicalkeeda.com/jquery/password-and-confirm-password-validation-in-jquery