Develop Reference

jQuery validation does not validate my textarea element

I am currently using jQuery validation to validate my fields. I've two fields,
named "comments" & "account name". Both fields have the same rule method where required is true. When I click the "save" button, only the account name was validated. Why is that so? Here is a screenshot of my problem and my codes
$(document).ready(function() {
$.validator.setDefaults({
errorClass: 'help-block',
highlight: function(element) {
$(element)
.closest('.form-group')
.addClass('has-error');
},
unhighlight: function(element, errorClass, validClass) {
$(element)
.closest('.form-group')
.removeClass('has-error')
.addClass('has-success');
},
});
$('#dataForm').validate({
rules: {
commentInput: {
required: true
},
accountNameInput: {
required: true
}
},
submitHandler: function(form) {
alert('success');
}
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.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://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.1.1/js/bootstrap.min.js"></script>
<form id="dataForm" method="post" action="#">
<div class="form-group">
<label class="control-label" for="commentInput">Comments</label>
<textarea class="commentInput" id="commentInput" cols="20" rows="5"></textarea>
</div>
<div class="form-group">
<label class="control-label" for="accountNameInput">Account name</label>
<input type="text" id="accountNameInput" name="accountNameInput" placeholder="Account name" class="form-control font-bold" value="" />
</div>
<input type="submit" class="btn btn-primary" value="Save" id="saveButton" />
</form>

You have to give all form fields that need validation a name attribute. That's where the validation plugin gets the reference to the element from.
From the documentation:
Throughout the documentation, two terms are used very often, so it's
important that you know their meaning in the context of the validation
plugin:
method: A validation method implements the logic to validate an element, like an email method that checks for the right format of a
text input's value. A set of standard methods is available, and it is
easy to write your own.
rule: A validation rule associates an element with a validation method, like "validate input with name "primary-mail" with
methods "required" and "email".
The name attribute is also required to be present on any form field that will need to transmit its data as part of the form submission.
$(function() {
$.validator.setDefaults({
errorClass: 'help-block',
highlight: function(element) {
$(element)
.closest('.form-group')
.addClass('has-error');
},
unhighlight: function(element, errorClass, validClass) {
$(element)
.closest('.form-group')
.removeClass('has-error')
.addClass('has-success');
},
});
$('#dataForm').validate({
rules: {
commentInput: {
required: true
},
accountNameInput: {
required: true
}
},
submitHandler: function(form) {
alert('success');
}
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.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://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.1.1/js/bootstrap.min.js"></script>
<form id="dataForm" method="post" action="#">
<div class="form-group">
<label class="control-label" for="commentInput">Comments</label>
<textarea class="commentInput" id="commentInput" name="commentInput" cols="20" rows="5"></textarea>
</div>
<div class="form-group">
<label class="control-label" for="accountNameInput">Account name</label>
<input type="text" id="accountNameInput" name="accountNameInput" placeholder="Account name" class="form-control font-bold" value="" />
</div>
<input type="submit" class="btn btn-primary" value="Save" id="saveButton" />
</form>

The validation plugin targets by the name attribute:
<textarea id="commentInput" name="commentInput" cols="20" rows="5"></textarea>

You need use the name attribute for validate.
$(document).ready(function() {
$.validator.setDefaults({
errorClass: 'help-block',
highlight: function(element) {
$(element)
.closest('.form-group')
.addClass('has-error');
},
unhighlight: function(element, errorClass, validClass) {
$(element)
.closest('.form-group')
.removeClass('has-error')
.addClass('has-success');
},
});
$('#dataForm').validate({
rules: {
commentInput: {
required: true
},
accountNameInput: {
required: true
}
},
submitHandler: function(form) {
alert('success');
}
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.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://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.1.1/js/bootstrap.min.js"></script>
<form id="dataForm" method="post" action="#">
<div class="form-group">
<label class="control-label" for="commentInput">Comments</label>
<textarea name="commentInput" class="commentInput" id="commentInput" cols="20" rows="5"></textarea>
</div>
<div class="form-group">
<label class="control-label" for="accountNameInput">Account name</label>
<input type="text" id="accountNameInput" name="accountNameInput" placeholder="Account name" class="form-control font-bold" value="" />
</div>
<input type="submit" class="btn btn-primary" value="Save" id="saveButton" />
</form>

jquery validation plugin ajax submit a form not working

I use jquery validation plugin to do validation in a bootstrap modal form, when i send the form ,the jquery validation plugin is working but ajax code will do two time and the form cannot send out.
bootstrap form
<form class="contact">
<fieldset>
<div class="modal-body">
<ul class="nav nav-list">
<div class="form-group">
<label for="topic" class="control-label ">topic</label>
<input class="form-control" type="text" name="topic" />
<span class="help-block"></span>
</div>
<div class="form-group">
<label for="ruser" class="control-label "> ruser: </label>
<input class="form-control" type="text" name="ruser" value="<?php echo $username; ?>" readonly/>
<span class="help-block"></span>
</div>
<div class="form-group">
<label for="content" class="control-label ">content:</label>
<textarea class="form-control" name="content" rows="3"></textarea>
<span class="help-block"></span>
</div>
</ul>
</div>
</fieldset>
<button class="btn btn-success" id="submitcontact">ok</button>
</form>
javascript
$(document).ready(function () {
$('form').validate({
rules: {
topic: {
required: true
},
ruser: {
required: true
},
content: {
required: true
}
},
messages: {
topic: {
required: 'enter topic'
},
ruser: {
required: 'enter nuser'
},
content: {
required: 'enter content'
}
},
highlight: function (element) {
$(element).closest('.form-group').addClass('has-error');
},
unhighlight: function (element) {
$(element).closest('.form-group').removeClass('has-error');
},
errorElement: 'span',
errorClass: 'help-block',
errorPlacement: function (error, element) {
if (element.parent('.input-group').length) {
error.insertAfter(element.parent());
} else {
error.insertAfter(element);
}
},
submitHandler: function (form) {
$.ajax({
type: "POST",
url: "process.php",
data: $('form.contact').serialize(),
success: function (msg) {
alert("ok!");
if (msg == 'ok') {
alert(msg);
location.reload()
}
},
error: function () {
alert("failure");
}
});
return false;
}
});
$('#submitcontact').click(function () {
$('form.contact').submit();
})
});
How can i fix the problem?
The jsfiddle

You probably need to remove this bit:
$('#submitcontact').click(function(){
$('form.contact').submit();
})
Please see the example:
http://jsfiddle.net/8eoreedb/1/

Use .valid() method:
Description: Checks whether the selected form is valid or whether all selected elements are valid.
Updated Fiddle
$('#submitcontact').on('click', function() {
if ($('form.contact').valid()) {
// Form is valid
$('form.contact').submit();
}
});
Doc: http://jqueryvalidation.org/valid/
Demo: http://jsfiddle.net/8eoreedb/4/

jQuery Validation Plugin Not Work With Jquery Form Plugin

I work with jquery validation plugin for validate my form. in my form I have jquery upload file using jquery form plugin.
JS:
$(document).ready(function()
{
$("#fileuploader").uploadFile({
url: "upload.php",
dragDrop:true,
multiple:false,
fileName: "myfile",
returnType:"json",
showDelete:true,
showFileCounter:false,
onSuccess:function(fileArray, data, xhr, pd)
{
var url = "download.php?filename="+data[0];
//pd.filename.html(data[0]);
pd.filename.html("<a href='"+url+"'>"+data[0]+"</a>");
},
deleteCallback: function(data,pd)
{
for(var i=0;i<data.length;i++)
{
$.post("delete.php",{op:"delete",name:data[i]},
function(resp, textStatus, jqXHR)
{
//Show Message
alert("File Deleted");
});
}
pd.statusbar.hide(); //You choice to hide/not.
}
});
});
$('form').validate({
ignore:'.uploadFile',
rules: {
firstname: {
minlength: 3,
maxlength: 15,
required: true
},
lastname: {
minlength: 3,
maxlength: 15,
required: true
}
},
highlight: function(element) {
$(element).closest('.form-group').addClass('has-error');
},
unhighlight: function(element) {
$(element).closest('.form-group').removeClass('has-error');
},
errorElement: 'span',
errorClass: 'help-block',
errorPlacement: function(error, element) {
if(element.parent('.input-group').length) {
error.insertAfter(element.parent());
} else {
error.insertAfter(element);
}
}
});
HTML:
<form>
<div id="fileuploader">Upload</div>
<div class="form-group">
<label class="control-label" for="firstname">Nome:</label>
<div class="input-group">
<span class="input-group-addon">$</span>
<input class="form-control" placeholder="Insira o seu nome próprio" name="firstname" type="text" />
</div>
</div>
<div class="form-group">
<label class="control-label" for="lastname">Apelido:</label>
<div class="input-group">
<span class="input-group-addon">€</span>
<input class="form-control" placeholder="Insira o seu apelido" name="lastname" type="text" />
</div>
</div>
<button type="submit" class="btn btn-primary">Submit</button>
</form>
Now, jquery validation is a conflict with jquery form plugin and not validate my form. I tried ignore:'.uploadFile' function but jquery validation not work.
How can I fix this problem?!
Not Work DEMO : http://jsfiddle.net/hTPY7/1400/
Worked Demo without upload plugin: http://jsfiddle.net/hTPY7/1404/

Conditional validation with BootstrapValidator

I'm using BootstrapValidator plugin to validate a form, however i have following problem. I have a "Phone" field and a "Mobile" field if the user does not enter either of them, I wanted to launch a custom message (you need to inform one phone number), and if he inform any (phone or mobile) validation would be satisfied.
The doubt is: Is it possible to use conditional inside BootstrapValidator?

This seems to be working for a lot of people derived from this post:
$('form').validate({
rules: {
Phone: {
required: true
},
Mobile: {
required: true
}
},
highlight: function(element) {
$(element).closest('.form-group').addClass('has-error');
},
unhighlight: function(element) {
$(element).closest('.form-group').removeClass('has-error');
},
errorElement: 'span',
errorClass: 'help-block',
errorPlacement: function(error, element) {
if(element.parent('.input-group').length) {
error.insertAfter(element.parent());
} else {
error.insertAfter(element);
}
}
});
and the html:
<form>
<div class="form-group">
<label class="control-label" for="Phone">Phone:</label>
<div class="input-group">
<input class="form-control" name="Phone" type="text" />
</div>
</div>
<div class="form-group">
<label class="control-label" for="Mobile">Mobile:</label>
<div class="input-group">
<input class="form-control" name="Mobile" type="text" />
</div>
</div>
<button type="submit" class="btn btn-primary">Submit</button>
</form>

".errorClass" of jQuery validate works but the class cannot be found by "hasClass()"

Problem
I'm not a programmer and I'm trying to do some programming.
I tried to use jQuery-validate plug-in to control the form input, it works perfectly, Bootstrap can even find the ".text-danger" class and change its' color.
However, the ".hasClass()" method just can't.
I put some "console.log()" functions in the for loops which are used to find this class.
The log messages I received every time are "changed", "hasSmall", "noClass".
Have I made mistakes in the JS code?
Please help me out.
Code
This is within my HTML form:
<div class="form-group">
<label for="username">Username </label>
<input type="text" class="form-control" name="username" id="signUpUserName" />
</div>
<div class="form-group">
<label for="password">Password </label>
<input type="password" class="form-control" name="password" id="signUpPassword" />
</div>
<div class="form-group">
<label for="email">Email </label>
<input type="text" class="form-control" name="email" id="signUpEmail" />
</div>
This is the JavaScript:
errorPlacement: function(error, element) {
var obj = $('[name="'+element.attr('name')+'"]');
obj.siblings('label').append(error);
},
I have changed some values in the valadate.min.js：
$.extend($.validator, {
defaults: {
messages: {},
groups: {},
rules: {},
errorClass: "text-danger", // I've changed this
validClass: "text-success", // this
errorElement: "small", // and this
focusInvalid: true,
errorContainer: $([]),
errorLabelContainer: $([]),
onsubmit: true,
ignore: ":hidden",
ignoreTitle: false,
Also, JS:
function changeInputAreaStatus(id) {
$(id).change(function(id) {
console.log('changed');
var errorMessageContainer = $(id).siblings('label');
if(errorMessageContainer.has('small')){
console.log('hasSmall');
if (errorMessageContainer.children('small').hasClass('text-danger')) {
console.log('hasDangerClass');
errorMessageContainer.parent().removeClass('has-error').addClass('has-error');
} else if (errorMessageContainer.children('small').hasClass('text-success')) {
console.log('hasSucessClass');
errorMessageContainer.parent().removeClass('has-error');
} else {
console.log('noClass');
}
}
});
}
changeInputAreaStatus('#signUpUserName');
changeInputAreaStatus('#signUpPassword');
changeInputAreaStatus('#signUpEmail');

You should try something like this :
var textSuccess = errorMessageContainer.find('.text-success');
if(textSuccess != null && textSuccess.length > 0){
console.log('hasSucessClass');
}
it should help you to verify if errorMessageContainer has a text-success class.
Best regards