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>

Formvalidation.io - Cannot read property 'classList' of null

I am always getting an error in my console when using formvalidation.io.
I have no idea what the cause of this error is. I also still get spam on some websites, even when I am using the backendVerificationURL. I am using Invisible ReCaptcha (https://formvalidation.io/guide/plugins/recaptcha/)
My HTML form:
<form id="contact" method="post" action="/vendor/contact-form.php">
<div class="card-body">
<div class="row">
<div class="col-md-6">
<div class="form-group label-floating is-empty">
<label class="bmd-label-floating">Naam</label>
<input type="text" name="naam" id="naam" class="form-control">
<span class="material-input"></span>
</div>
</div>
<div class="col-md-6">
<div class="form-group label-floating is-empty">
<label class="bmd-label-floating">Telefoonnummer</label>
<input type="text" name="telefoon" id="telefoon" class="form-control">
<span class="material-input"></span>
</div>
</div>
</div>
<div class="form-group label-floating is-empty">
<label class="bmd-label-floating">Mailadres</label>
<input type="email" name="email" id="email" class="form-control">
<span class="material-input"></span>
</div>
<div class="form-group label-floating is-empty">
<label for="bericht" class="bmd-label-floating">Uw bericht</label>
<textarea name="bericht" class="form-control" id="bericht" rows="6"></textarea>
<span class="material-input"></span>
</div>
</div>
<div class="card-footer justify-content-between">
<div class="form-check">
<!-- De captcha container -->
<div id="captchaContainer"></div>
</div>
<button type="submit" class="btn btn-brown">Aanvragen</button>
</div>
</form>
And this is my validation script (validation-contact.js):
document.addEventListener('DOMContentLoaded', function(e) {
FormValidation.formValidation(
document.getElementById('contact'),
{
fields: {
naam: {
validators: {
notEmpty: {
message: 'Vul alstublieft uw naam in'
}
}
},
telefoon: {
validators: {
phone: {
country: 'NL',
message: 'U heeft een ongeldig telefoonnummer ingevuld'
},
notEmpty: {
message: 'Vul alstublieft uw telefoonnummer in'
}
}
},
email: {
validators: {
notEmpty: {
message: 'Vul alstublieft uw emailadres in'
},
emailAddress: {
message: 'U heeft een ongeldig emailadres ingevuld'
}
}
},
},
plugins: {
trigger: new FormValidation.plugins.Trigger(),
bootstrap: new FormValidation.plugins.Bootstrap(),
submitButton: new FormValidation.plugins.SubmitButton(),
defaultSubmit: new FormValidation.plugins.DefaultSubmit(),
icon: new FormValidation.plugins.Icon({
valid: 'fa fa-check',
invalid: 'fa fa-times',
validating: 'fa fa-refresh',
}),
recaptcha: new FormValidation.plugins.Recaptcha({
element: 'captchaContainer',
message: 'The captcha is not valid or expired',
// Replace with the site key provided by Google
siteKey: 'MYSITEKEY',
badge: 'bottomleft',
theme: 'light',
size: 'invisible',
backendVerificationUrl: '/vendor/verification-url.php',
}),
},
})
});
EDIT:
In the head of my page I have:
<link rel="stylesheet" href="/assets/css/fontawesome-all.css" />
<link rel="stylesheet" href="https://unpkg.com/tachyons#4.10.0/css/tachyons.min.css">
<link rel="stylesheet" href="/vendor/formvalidation/dist/css/formValidation.min.css">
and in the footer:
<script src="https://cdnjs.cloudflare.com/ajax/libs/es6-shim/0.35.3/es6-shim.min.js"></script>
<script src="/vendor/formvalidation/dist/js/FormValidation.min.js"></script>
<script src="/vendor/formvalidation/dist/js/plugins/Recaptcha.min.js"></script>
<script src="/vendor/formvalidation/dist/js/plugins/Tachyons.min.js"></script>
<script src="/vendor/formvalidation/dist/js/plugins/Bootstrap.min.js"></script>
EDIT:EDIT:
The bottom of my page looks like this:

I had a very similar issue with version 1.3 of FormValidaiton.io. For what it's worth, and in case it helps you, I solved mine by nesting any form-check DIV elements inside a form-group DIV.
<div class="form-group"><div class="form-check"></div></div>
An alternative which also worked was to use the rowSelector option - as specified in this example here.
https://formvalidation.io/guide/examples/validating-checkbox-list-placed-multiple-columns/

<div class="form-row">
<div class="form-group form-check">
<input type="checkbox" class="form-check-input">
</div>
</div>
1.We have to include form-group to all fields in the form.
2. if we have check boxes, include form-check class with respect to form-group class. then add form-check-input class to input tag.
3.if you are using reCapture check box please refer this link (https://formvalidation.io/guide/plugins/recaptcha/)
If you want to identify the error fields. Please remove fields in form validation one by one then check that classList error is getting or not. if we got that error in one particular field. You have to modify that filed only, as mentioned above.

jquery validation with php form

I am trying to use jquery validation for a php form to change your password but I keep getting the error "Your password must be the same as above" when the password is correct. I can't seem to find out where I have went wrong at all... Here's the JS code
var changepassword = function() {
return {
init: function() {
/*
* Jquery Validation, https://github.com/jzaefferer/jquery-validation
*/
$('#changepassword').validate({
errorClass: 'help-block animation-slideUp',
errorElement: 'div',
errorPlacement: function(error, e) {
e.parents('.form-group > div').append(error);
},
highlight: function(e) {
$(e).closest('.form-group').removeClass('has-success has-error').addClass('has-error');
$(e).closest('.help-block').remove();
},
success: function(e) {
if (e.closest('.form-group').find('.help-block').length === 2) {
e.closest('.help-block').remove();
} else {
e.closest('.form-group').removeClass('has-success has-error');
e.closest('.help-block').remove();
}
},
rules: {
'newpassword': {
required: true,
minlength: 6
},
'newpassword-verify': {
equalTo: '#newpassword',
required: true
}
},
messages: {
'newpassword': {
required: 'Please provide a password',
minlength: 'Your password must be at least 6 characters long'
},
'newpassword-verify': {
required: 'Please provide a password',
minlength: 'Your password must be at least 6 characters long',
equalTo: 'Please enter the same password as above'
}
}
});
}
};
}();
This is the PHP/HTML for the form
<form method="POST" class="form-horizontal form-bordered" id="changepassword">
<div class="form-group">
<label class="col-md-3 control-label" for="newpassword">New Password</label>
<div class="col-md-6">
<input type="password" id="newpassword" name="newpassword" class="form-control" placeholder="New Password" required>
</div>
</div>
<!-- This is where I keep getting the error -->
<div class="form-group">
<label class="col-md-3 control-label">Repeat Password</label>
<div class="col-md-6">
<input type="password" id="newpassword-verify" name="newpassword-verify" class="form-control" placeholder="Repeat Password" required>
</div>
</div>
<div class="form-group">
<label class="col-md-3 control-label" for="oldpassword">Current Password</label>
<div class="col-md-6">
<input type="password" id="oldpassword" name="oldpassword" class="form-control" placeholder="Password" required>
</div>
</div>
<div class="form-group form-actions">
<button type="submit" name="update" class="btn btn-block btn-primary">Update</button>
</div>
</form>

Sorry, I was able to fix it by making a new file called settings1.php then removing the old one and renaming the new one with the old name.

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.

Simple jquery validation - custom position error message placement

I am using jquery validate plugin to validate number in a form , how can i place the returned error message under the input button , i am unable to achieve,
Here is my image with the issue and what i need,pls check - http://i.imgur.com/Gt5aNxs.png
Please suggest me how to put the error message in a custom Div under the button instead of default underneath.
Here is my code:
<section id="contact" class="content">
<div class="container">
<h2>Contact Form Demo</h2>
<div class="row">
<div class="span12 contact-form">
<form action="mail.php" method="POST" class="form-horizontal contact-form" id="contact-form">
<!--<?php $formKey->outputKey(); ?> -->
<fieldset>
<div class="control-group">
<label class="control-label" for="inputPhone">Phone</label>
<div class="controls">
<input class="input-80" name="phone" type="text" id="inputPhone" placeholder="inc. country & area code">
</div>
</div>
<div class="control-group">
<div class="controls">
<button type="submit" value="Send" class="btn" id="btn-place">Send!</button>
</div>
<div >place here</div>
</div>
</fieldset>
</form>
</div>
</div>
</div>
</section>
<!-- javascript -->
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<script src="js/jquery.validate.min.js"></script>
<script>
// contact form validation
$(document).ready(function(){
$('#contact-form').validate(
{
rules: {
name: {
minlength: 3,
required: true
},
email: {
required: true,
email: true
},
phone: {
minlength: 11,
required: false,
number: true
},
subject: {
minlength: 3,
required: true
},
message: {
minlength: 20,
required: true
}
},
highlight: function(label) {
$(label).closest('.control-group').addClass('error');
},
success: function(label) {
label
.text('OK!').addClass('valid')
.closest('.control-group').addClass('success');
}
});
// contact form submission, clear fields, return message,script no shown here
</script>

All you need to do is specify the errorLabelContainer in your options and specify the div you want the errors to go into:
$('#contact-form').validate({
//all your other options here
errorLabelContainer: '#errors'
});
Then just make sure you specify that your place here div has the id errors like this:
<div id="errors"></div>
See a working example here: http://jsfiddle.net/ryleyb/aaEFQ/ (note that I also specified the wrapper option, which you'll probably want if there are multiple errors).

errorPlacement: function(error, element) {
if((element.attr('name') === 'color[]')){
error.appendTo("div#errors");
}
else if(element.attr('name') === 'font[]' ){
error.appendTo("#font-error");
}
else{
element.before(error);
}
}