Develop Reference

jQuery Validation submits even though it's invalid in form

I believe my api addEventListener is effecting my page validation. The required field validator works perfectly. When I try the second condition that to meet the length requirement it shows the error validation but still submits the data to the api to update the database. Why is it still submitting even though it's not valid for the min length scenario?
formAddUrl.addEventListener('submit', function(e) {
e.preventDefault();
console.log("submitting add")
const formData = new FormData(this);
fetch('/OfficerUrl/AddOfficerPararameter', {
method: 'post',
body: formData,
});
});
formUpdateUrl.addEventListener('submit', function(e) {
e.preventDefault();
console.log("submitting update")
const formData = new FormData(this);
fetch('/OfficerUrl/UpdateOfficerPararameter', {
method: 'post',
body: formData,
});
});
var beginAddValidator = $("form[name='formAddUrl']").validate({
rules: {
OfficerId: {
number: true,
required: true,
range: [0, 9999999]
},
OfficerUrl: {
required: true,
minlength: 5
}
},
messages: {
OfficerId: "Please enter a Officer Id.",
OfficerUrl: {
required: "Please enter a Officer Url.",
minlength: "Url must be at least 5 characters long."
}
},
});
var beginUpdateValidator = $("form[name='formUpdateUrl']").validate({
rules: {
OfficerUrl: {
required: true,
minlength: 5
}
},
messages: {
OfficerUrl: {
required: "Please enter a Officer Url.",
minlength: "Url must be at least 5 characters long."
}
},
});
<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.3/jquery.validate.min.js" integrity="sha512-37T7leoNS06R80c8Ulq7cdCDU5MNQBwlYoy1TX/WUsLFC2eYNqtKlV0QjH7r8JpG/S0GUMZwebnVFLPd6SU5yg==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
<form id="formAddUrl" name="formAddUrl" method="post">
<div>
<label for="OfficerId" class="col-sm-6 control-label cleanPadding">Loan Officer ID</label>
<input name="OfficerId" id="OfficerId" class="form-control" placeholder="Officer Id" type="number" required />
</div>
<div>
<label for="OfficerUrl" class="col-sm-6 control-label cleanPadding">Officer Url</label>
<input name="OfficerUrl" id="OfficerUrl" class="form-control" placeholder="New" type="text" required />
</div>
<button type="submit" class="btn btn-primary btn-submit" name="add" style="width: 73px;">Add</button>
</form>
<form id="formUpdateUrl" name="formUpdateUrl" method="post">
<div>
<label class="col-sm-6 control-label cleanPadding"> Officer Url</label>
<input id="currentUrl" class="form-control" placeholder="Current" disabled />
</div>
<div>
<label for="OfficerUrl" class="col-sm-6 control-label cleanPadding">New Loan Officer Url</label>
<input name="OfficerUrl" id="newUrl" class="form-control" placeholder="New" />
</div>
<button type="submit" class="btn btn-primary btn-submit" name="update">Update</button>
</form>

jQuery form validate plugin activate

I have three forms on my website: register-form, login-form and article-form.
All three forms are validated via the plugin, all inside the one javascript file.
The register-form and login-form's work as expected and actually validate the form, yet the article-form one does not? the same code is used throughout and there are no errors that I can see...
Do the stylesheets need to be ordered in a certain way?
Is there a limit to the number of forms in a certain form validate file?
Article Form - Inside the .js file
//validate insertArticles form
//validate
$(function(){
$('#article-form').validate(
{
rules:{
heading: {
required: true,
maxlength:75,
},
topic: {
required: true,
maxlength: 15,
},
summary: {
maxlength: 100,
},
text: {
required: true
}
}
}); //valdate end
}); //function end
HTML article-form
$(function(){
$('#article-form').validate(
{
rules:{
heading: {
required: true,
maxlength:75,
},
topic: {
required: true,
maxlength: 15,
},
summary: {
maxlength: 100,
},
text: {
required: true
}
}
}); //valdate end
}); //function end
<!--Incude Head-->
<?php require_once '../view/header.php';?>
<body>
<div id="wrapper"><!--wrapper start-->
<!--Include Navbar-->
<?php require_once '../view/navbar.php';?>
<div class="container" id="content"><!--container start-->
<div class="jumbotron"><!--jumbotron start-->
<!--Form 1-->
<div class="col-lg-12 col-md-12 col-sm-12 col-xs-12" id="Question">
<form class="article" id="article-form" method="post" enctype="multipart/form-data">
<ol>
<li>
<label for="heading">Heading</label> <span id="headingMessage"></span>
<input name="heading" id="heading" class="form-control" type="text">
</li>
<li>
<label for="topic">Topic</label> <span id="topicMessage"></span>
<input name="topic" id="topic" class="form-control" type="text" list="football" >
<datalist id="football">
<option value="Scotland"></option>
<option value="England"></option>
<option value="Spain"></option>
</datalist>
</li>
<li>
<label for="summary">Summary</label>
<input name="summary" id="summary" class="form-control">
</li>
<li>
<label for="thumbnail">Thumbnail</label> <span id="thumbnailMessage"></span>
<!-- <input name="thumbnail" id="thumbnail" class="form-control" type="text" required> -->
<input type="file" name="file" id="file">
</li>
<li>
<label for="articleText">Text</label>
</div>
<textarea name="articleText" id="articleText" class="md-textarea form-control"></textarea>
</li>
<li>
<div class="g-recaptcha" data-sitekey="xx-0xitZ7ZeZ"></div>
</li>
</ol>
<input class="btn btn-success" id="formButton" type="submit" name="submit"value="Submit" name="submit">
<input class="btn btn-danger" id="formButton" type="reset" value="Reset">
</form>
<script>
//$("#articleText").jqte();
</script>
<?php require '../controller/NewArticle.php';?>
</div>
</div><!--jumbotron end-->
</div><!--container end-->
<!-- Include Footer -->
<?php require_once '../view/footer.php';?>
</div><!--wrapper end-->
</body>
<script src ="../controller/FormValidate.js"></script>
<script src="../js/bootstrap.min.js"></script>
<!-- jQuery Validate Plugin -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-validate/1.17.0/jquery.validate.min.js"></script>
<script src="https://cdn.jsdelivr.net/jquery.validation/1.16.0/additional-methods.min.js"></script>
<script src='https://www.google.com/recaptcha/api.js'></script><!--Google API - Captcha -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
</html>
</body>
<script src ="../controller/FormValidate.js"></script>
<script src="../js/bootstrap.min.js"></script>
<!-- jQuery Validate Plugin -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-validate/1.17.0/jquery.validate.min.js"></script>
<script src="https://cdn.jsdelivr.net/jquery.validation/1.16.0/additional-methods.min.js"></script>
<script src='https://www.google.com/recaptcha/api.js'></script><!--Google API - Captcha -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="../controller/FormHelp.js"></script>
<!-- Text editor plugin -->
</html>
For an example, I will include the code from my register form
//validate
$(function(){
$.validator.addMethod('strongPassword', function(value, element) {
return this.optional(element)
|| value.length >= 8
&& /\d/.test(value)
&& /[a-z]/i.test(value)
&& /[A-Z]/i.test(value)
&& /[!\#\#\$\%\^\&\*\(\)\_\+\.\,\;\:]/i.test(value);
}, 'Password not strong enough - include: special character, letters and number')
$('#register-form').validate({
rules:{
email: {
required: true,
email: true
},
password:{
required: true,
strongPassword: true
},
confirmPassword:{
required: true,
equalTo: '#password'
},
firstname: {
required: true,
nowhitespace: true,
lettersonly: true
},
lastname: {
required: true,
nowhitespace: true,
lettersonly: true
},
mobileNumber: {
required: true,
digits: true,
phonesUK: true
},
username:{
required:true
}
},
messages: {
email: {
required: 'Please enter an email address',
email: 'Please enter a <i>valid</i> email address,'
},
mobileNumber:{
required: 'Please enter a mobile number <b>(digits only)</b>',
mobileNumber: "Please enter a <i>valid</i> UK mobile number"
}
}
}); //valdate end
}); //function end

jQuery validation plugin is validating only specific form fields

I am trying basic client-side form validation using jQuery validation plugin.I have a basic sign up form, if I click on a button to create an account with all fields empty(just for testing), I am getting nice error messages as expected on all form fields except for only one field for inputting cellphone number. I have downloaded the code from the internet and this is the only field I have added.I am using Xampp, Things became even more strange after I moved all files to another computer and try to test the same validation, Guess what? it's no longer working as expected for all fields. This problem has been frying my brains, any help I will be grateful below is the code
HTML
<h2 class="form-signin-heading">Sign Up</h2><hr />
<div id="error">
</div>
<div class="form-group">
<input type="text" class="form-control" placeholder="Username" name="user_name" id="user_name" />
</div>
<div class="form-group">
<input type="email" class="form-control" placeholder="Email address" name="user_email" id="user_email" />
<span id="check-e"></span>
</div>
<div class="form-group">
<input type="text" class="form-control" placeholder="Cellphone" name="user_cellphone" id="user_cellphone" />
</div>
<div class="form-group">
<input type="password" class="form-control" placeholder="Password" name="password" id="password" />
</div>
<div class="form-group">
<input type="password" class="form-control" placeholder="Retype Password" name="cpassword" id="cpassword" />
</div>
<hr />
<div class="form-group">
<button type="submit" class="btn btn-default" name="btn-save" id="btn-submit">
<span class="glyphicon glyphicon-log-in"></span> Create Account
</button>
</div>
</form>
JS
$('document').ready(function()
{
/* validation */
$("#register-form").validate({
rules:
{
user_name: {
required: true,
minlength: 3
},
user_cellphone: {
required: true,
number: true
},
password: {
required: true,
minlength: 8,
maxlength: 15
},
cpassword: {
required: true,
equalTo: '#password'
},
user_email: {
required: true,
email: true
}
},
messages:
{
user_name: "Enter a Valid Username",
user_cellphone:{
required: "Provide a phone number",
number: "Phone Needs To Be a number"
},
password:{
required: "Provide a Password",
minlength: "Password Needs To Be Minimum of 8 Characters"
},
user_email: "Enter a Valid Email",
cpassword:{
required: "Retype Your Password",
equalTo: "Password Mismatch! Retype"
}
},
submitHandler: submitForm
});
/* validation */
/* form submit */
function submitForm()
{
var data = $("#register-form").serialize();
$.ajax({
type : 'POST',
url : 'register.php',
data : data,
beforeSend: function()
{
$("#error").fadeOut();
$("#btn-submit").html('<span class="glyphicon glyphicon-transfer"></span> sending ...');
},
success : function(data)
{
if(data==1){
$("#error").fadeIn(1000, function(){
$("#error").html('<div class="alert alert-danger"> <span class="glyphicon glyphicon-info-sign"></span> Sorry email already taken !</div>');
$("#btn-submit").html('<span class="glyphicon glyphicon-log-in"></span> Create Account');
});
}
else if(data=="registered")
{
$("#btn-submit").html('Signing Up');
setTimeout('$(".form-signin").fadeOut(500, function(){ $(".signin-form").load("successreg.php"); }); ',5000);
}
else{
$("#error").fadeIn(1000, function(){
$("#error").html('<div class="alert alert-danger"><span class="glyphicon glyphicon-info-sign"></span> '+data+' !</div>');
$("#btn-submit").html('<span class="glyphicon glyphicon-log-in"></span> Create Account');
});
}
}
});
return false;
}
/* form submit */
Below is a snapshot of the form, I cant really figure out where is the problem.

You're declaring the number rule, but your corresponding message is assigned to the minlength rule...
rules: {
user_cellphone: {
required: true,
number: true
},
....
},
messages: {
user_cellphone: {
required: "Provide a phone number",
minlength: "Phone Needs To Be a number"
},
....
And document should not be in quotes...
$(document).ready(function() {...
Working DEMO: http://jsfiddle.net/bh5g0wfe/
Side note: You may want to read this too...
Dangerous implications of Allman style in JavaScript

validation is not correct when no elements type in the confirm password text box

How to check the validation of the password. In below when I try to type something in password text field and if I ignore the confirm password text field, still it can be submitted. But if I type something in confirm password text field it'll check it with the password text field, whether the inputs are same or not.
Fiddle
<head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<script type="text/javascript" src="http://code.jquery.com/jquery-1.10.2.js"></script>
<link href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet">
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="http://cdnjs.cloudflare.com/ajax/libs/jquery.bootstrapvalidator/0.5.3/css/bootstrapValidator.min.css"/>
<script type="text/javascript" src="http://cdnjs.cloudflare.com/ajax/libs/jquery.bootstrapvalidator/0.5.3/js/bootstrapValidator.min.js"> </script>
</head>
<body>
<form id="enableForm" class="form-horizontal">
<div class="form-group">
<label class="col-xs-3 control-label">New password</label>
<div class="col-xs-5">
<input type="password" class="form-control" name="password" />
</div>
</div>
<div class="form-group">
<label class="col-xs-3 control-label">Confirm_password</label>
<div class="col-xs-5">
<input type="password" class="form-control" name="confirm_password" />
</div>
</div>
<div class="form-group">
<div class="col-md-9 col-md-offset-3">
<button type="submit" class="btn btn-default">Validate</button>
</div>
</div>
</form>
<script type="text/javascript">
$(document).ready(function() {
$('#enableForm').bootstrapValidator({
container: '#messages',
feedbackIcons: {
valid: 'glyphicon glyphicon-ok',
invalid: 'glyphicon glyphicon-remove',
validating: 'glyphicon glyphicon-refresh'
},
fields: {
password: {
enabled: false,
validators: {
notEmpty: {
message: 'The password is required and cannot be empty'
}
}
},
confirm_password: {
enabled: false,
validators: {
notEmpty: {
message: 'The confirm password is required and cannot be empty'
},
identical: {
field: 'password',
message: 'The password and its confirm must be the same'
}
}
}
}
})
// Enable the password/confirm password validators if the password is not empty
.on('keyup', '[name="password"]', function() {
var isEmpty = $(this).val() == '';
$('#enableForm')
.bootstrapValidator('enableFieldValidators', 'password', !isEmpty)
.bootstrapValidator('enableFieldValidators', 'confirm_password', !isEmpty);
// Revalidate the field when user start typing in the password field
if ($(this).val().length == 1) {
$('#enableForm').bootstrapValidator('validateField', 'password')
.bootstrapValidator('validateField', 'confirm_password');
}
});
});
</script>
</html>

Jquery Plugin not validating a form

I am using Jquery Plugin to validate an Edit form.The validation works fine with the Create Form but it does not work with the Edit form.
My HTML is
<body>
<div class="container">
<h1 class="col-sm-offset-2">Edit Provider Details:</h1>
<br />
<form class="form-horizontal" role="form" id="EditProviderDetailsForm" method="post">
<div class="form-group">
<label class="col-sm-2 control-label labelfont">FIRST NAME:</label>
<div class="col-sm-6">
<input type="text" class="form-control" autofocus="autofocus" placeholder="Enter the First Name" id="FirstName" data-bind="value:FirstName">
</div>
<label class="col-sm-4 labelfont errorMsg" id="Err_FirstName">Enter the first name</label>
</div>
<div class="form-group">
<label class="col-sm-2 control-label labelfont">CONTACT NUMBER:</label>
<div class="col-sm-6">
<input type="text" class="form-control" data- bind="value:ContactNumber" placeholder="Enter the Contact Number" id="ContactNumber" maxlength="13">
</div>
<label class="col-sm-4 labelfont errorMsg" id="Err_ContactNum">Enter the Contact Number</label>
</div>
<div class="form-group">
<label class="col-sm-2 control-label labelfont">EMAIL ADDRESS: </label>
<div class="col-sm-6">
<input type="text" class="form-control" data- bind="value:ContactEmail" placeholder="Enter your email address" id="EmailAddress">
</div>
<label class="col-sm-4 labelfont errorMsg" id="Err_EmailAddress">Enter the Email Address</label>
</div>
<div class="form-group">
<button type="submit" id="Update" class="btn btn-primary col-sm-1 col- sm-offset-4">Update</button>
<button type="button" id="Cancel" class="btn btn-primary col-sm- 1">Reset</button>
</div>
</form>
</div>
</body>
The JavaScript is
$(document).ready(function () {
jQuery.validator.addMethod("AcceptEmail", function (value, element) {
return this.optional(element) || /^([\w\d\-\.]+)#{1}(([\w\d\-]{1,67})| ([\w\d\-]+\.[\w\d\-]{1,67}))\.(([a-zA-Z\d]{2,4})(\.[a-zA-Z\d] {2})?)$/.test(value);
});
$("#EditProviderDetailsForm").validate({
onfocusout: function (element, event) {
this.element(element);
},
onkeyup: function (element, event) {
if (event.which === 9 && this.elementValue(element) === '') {
return;
} else if (element.name in this.submitted) {
this.element(element);
}
},
rules:
{
FirstName: { required: true, minlength: 2, maxlength: 20 },
ContactNumber: { required: true, minlength: 10, maxlength: 10 },
ContactEmail: { required: true, AcceptEmail: true }
},
messages: {
FirstName: {
required: "Please enter your first name",
minlength: "Minimum 2 characters required",
maxlength: "Maximum 20 characters allowed"
},
ContactNumber: {
required: "Please enter your Contact Number",
minlength: "Enter a 10 digit contact number",
maxlength: "Enter a 10 digit contact number"
},
ContactEmail: {
required: "Please enter your Email Address",
AcceptEmail: "Please enter a valid email ID"
}
}
});
var Provider = {
SpecializationArray: ko.observableArray(Specialities),
ProviderID: ko.observable(Edit_data.ProviderID),
FirstName: ko.observable(Edit_data.FirstName),
ContactNumber: ko.observable(Edit_data.ContactNumber),
ContactEmail: ko.observable(Edit_data.ContactEmail)
}
ko.applyBindings(Provider);
});
My Scripts are getting loaded in _Layout page in the Shared folder of MVC.
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width" />
<link rel="stylesheet" href="../../Content/bootstrap-theme.min.css" />
<link rel="stylesheet" href="../../Content/bootstrap.min.css" />
<title>#ViewBag.Title</title>
#Styles.Render("~/Content/css")
#Scripts.Render("~/bundles/modernizr")
<script type="text/javascript" src="../../Scripts/jquery-2.1.3.min.js"> </script>
<script type="text/javascript" src="../../Scripts/jquery-ui-1.11.2.min.js"></script>
<script type="text/javascript" src="../../Scripts/bootstrap.min.js"></script>
<script type="text/javascript" src="../../Scripts/jquery.unobtrusive-ajax.min.js"></script>
<script type="text/javascript" src="../../Scripts/jquery.validate.min.js"></script>
<script type="text/javascript" src="../../Scripts/knockout-3.2.0.js"></script>
</head>
I am at a loss here.Please guide me in the right direction.There are no errors in the Console.

You've missed one of the basics unfortunately - jQuery Validate requires every input to have a name attribute. Simply copy all your id attributes to the name and your code will work.
This is described in the wiki for the library. Also in the documentation:
The name attribute is '''required''' for input elements, the
validation plugin doesn't work without it. Usually name and id
attributes should have the same value.