We Keep Coding

Jquery validator moves input field

I've got three fields inline and one of them is a inpt field, this is how it look like when they are validated
https://ibb.co/X8c1jDZ
the problem is when I enter some values into the input fiedl then it moves all the other fields as you can see from the image
https://ibb.co/Fn666cw
I believe something is wrong with the way I unhighlight the field once has been filled but not sure, maybe someone can help me. Please let me know if you need more details. many thanks
This is my html code
<div class="row">
<div class="form-group fieldGroup">
<div class="col-md-4">
<div class="form-group">
<label class="control-label">Tipologia proprietario</label>
<select class="form-control bs-select" id="kmg_admin_new_building_owner_type-1" name="kmg_admin_new_building_owner_type[]" data-live-search="true" title="Seleziona tipologia proprietario">
<option value="1">Proprietario</option>
<option value="2">Co-Proprietario</option>
<option value="3">Nudo proprietario</option>
<option value="4">Usufruttuario</option>
</select>
</div>
</div>
<div class="col-md-4">
<div class="form-group">
<label class="control-label">Proprietario</label>
<select class="form-control bs-select" id="kmg_admin_new_building_owner-1" name="kmg_admin_new_building_owner[]" data-live-search="true" title="Seleziona tipologia proprietario">
<option value="1">Proprietario</option>
<option value="2">Co-Proprietario</option>
<option value="3">Nudo proprietario</option>
<option value="4">Usufruttuario</option>
</select>
</div>
</div>
<div class="col-md-4">
<div class="form-group">
<label class="control-label">Se
<span class="required"> * </span>
</label>
<div class="input-group">
<input type="text" class="form-control prova" id="kmg_admin_new_building_owner_quota-1" name="kmg_admin_new_building_owner_quota[]" placeholder="Quota titolare">
<span class="input-group-btn input-group-btn input-space">
<button class="btn btn-default addMore" type="button">Aggiungi proprietario</button>
</span>
<span class="input-group-btn input-group-btn input-space">
<button class="btn btn-default remove" type="button">Rimuovi proprietario</button>
</span>
</div>
</div>
</div>
</div>
</div>
This is my javascript code
form.validate({
// doNotHideMessage: true, //this option enables to show the error/success messages on tab switch.
errorElement: 'span', //default input error message container
errorClass: 'help-block help-block-error', // default input error message class
focusInvalid: false, // do not focus the last invalid input
rules: {
kmg_admin_new_building_increment: {
required: true,
digits: true,
remote: {
type: 'POST',
data: {
ajax_action: 'kmg_new_building_check_increment',
kmg_new_building_increment: function() {
return $( "#kmg_admin_new_building_increment" ).val();
}
}
}
},
kmg_admin_new_building_type: { required: true },
kmg_admin_new_building_palazzina: { required: true },
kmg_admin_new_building_interno: { required: true },
"kmg_admin_new_building_owner_type[]": {required: true},
"kmg_admin_new_building_owner[]": { required: true },
"kmg_admin_new_building_owner_quota[]": {
required: true,
number: true,
min: 0,
max: 100
},
kmg_admin_new_building_metri: {
required: false,
digits: true
}
},
messages: {
kmg_admin_new_building_increment: {
required: "Specifica un ordine di stampa univoco",
digits: "L'ordine di stampa può solo essere un numero",
remote: "Ordine di stampa è già registrato!",
},
kmg_admin_new_building_type: "Specifica la tipologia dell'unità immobiliare",
kmg_admin_new_building_palazzina: "Specifica la palazzina dell'unità immobiliare",
kmg_admin_new_building_interno: "Inserisci il valore d'interno",
"kmg_admin_new_building_owner_type[]": "Seleziona tipologia di proprietario",
"kmg_admin_new_building_owner[]": "Seleziona proprietario",
"kmg_admin_new_building_owner_quota[]": {
required: "Specifica la quota",
number: "solo numeri",
min: "minimo 0",
max: "massimo 100"
},
kmg_admin_new_building_metri: {digits: "Inserisci valore numerico"}
},
errorPlacement: function(error, element) { // render error placement for each input type
if (element.parent(".input-group").length > 0) {
error.insertAfter(element.parent(".input-group"));
} else {
error.appendTo(element.closest('.form-group'));
}
},
invalidHandler: function(event, validator) { //display error alert on form submit
success.hide();
error.show();
App.scrollTo(error, -200);
},
highlight: function(element) { // hightlight error inputs
$(element).closest('.form-group').removeClass('has-success').addClass('has-error');
},
unhighlight: function(element) { // revert the change done by hightlight
$(element).closest('.form-group').removeClass('has-error'); // set error class to the control group
},
success: function(label) {
label.addClass('valid').closest('.form-group').removeClass('has-error').addClass('has-success'); // set success class to the control group
},
This is how i clone the fields
//add more fields group
var fieldGroup = $(".fieldGroup").clone();
// Hide remove button
$(".remove").parent('span').hide();
$(".addMore").click(function(e) {
var fgc = $('body').find('.fieldGroup').length;
var fieldHTML = '<div class="form-group fieldGroup">' + fieldGroup.html() + '</div>';
fieldHTML = fieldHTML.replace('kmg_admin_new_building_owner_type-1', 'kmg_admin_new_building_owner_type-' + (fgc + 1));
fieldHTML = fieldHTML.replace('kmg_admin_new_building_owner-1', 'kmg_admin_new_building_owner-' + (fgc + 1));
fieldHTML = fieldHTML.replace('kmg_admin_new_building_owner_quota-1', 'fkmg_admin_new_building_owner_quota-' + (fgc + 1));
$('body').find('.fieldGroup:last').after(fieldHTML);
var el = $('.fieldGroup').next();
// Hide add new button
el.find('.addMore').parent('span').hide();
// Show remove button
el.find('.remove').parent('span').show();
// Load selectpicker again after cloning the inputs
$('.bs-select').selectpicker({
iconBase: 'fa',
tickIcon: 'fa-check',
dropupAuto: false
});
});
//remove fields group
$("body").on("click", ".remove", function() {
$(this).parents(".fieldGroup").remove();
});

This is not a serious problem, I think, you just have to think of the changes of the layout, and prepare for them in your CSS.
Here's an example of what's happening:
(You can find a short explanation at the bottom of the answer.)
jQuery(document).ready(function($) {
$(".modify").on('click', function(e) {
// $.fn.toggle() switches between display: none and
// display: block
$('#il3').find('label').toggle()
})
})
.inputandlabel {
float: left;
}
input[type="text"],
label {
display: block;
}
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" rel="stylesheet" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script>
<div class="container">
<div class="row">
<div class="col-6">
<button type="button" class="btn btn-primary modify">Just push it to see the problem</button>
</div>
</div>
<div class="row">
<div class="col-12">
<div id="il1" class="inputandlabel">
<label for="form1">Form1</label>
<input id="form1" type="text" />
</div>
<div id="il2" class="inputandlabel">
<label for="form2">Form2</label>
<input id="form2" type="text" />
</div>
<div id="il3" class="inputandlabel">
<label for="form3">Form3</label>
<input id="form3" type="text" />
</div>
<div id="il4" class="inputandlabel">
<label for="form4">Form4</label>
<input id="form4" type="text" />
</div>
<div id="il5" class="inputandlabel">
<label for="form5">Form5</label>
<input id="form5" type="text" />
</div>
<div id="il6" class="inputandlabel">
<label for="form6">Form6</label>
<input id="form6" type="text" />
</div>
</div>
</div>
</div>
And here's a solution:
jQuery(document).ready(function($) {
$(".modify").on('click', function(e) {
e.preventDefault()
if ($('#il3').find('label').css('visibility') !== 'hidden') {
$('#il3').find('label').css('visibility', 'hidden')
} else {
$('#il3').find('label').css('visibility', 'visible')
}
})
})
.inputandlabel {
float: left;
}
input[type="text"],
label {
display: block;
}
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" rel="stylesheet" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script>
<div class="container">
<div class="row">
<div class="col-6">
<button type="button" class="btn btn-primary modify">Just push it to see "nothing"</button>
</div>
</div>
<div class="row">
<div class="col-12">
<div id="il1" class="inputandlabel">
<label for="form1">Form1</label>
<input id="form1" type="text" />
</div>
<div id="il2" class="inputandlabel">
<label for="form2">Form2</label>
<input id="form2" type="text" />
</div>
<div id="il3" class="inputandlabel">
<label for="form3">Form3</label>
<input id="form3" type="text" />
</div>
<div id="il4" class="inputandlabel">
<label for="form4">Form4</label>
<input id="form4" type="text" />
</div>
<div id="il5" class="inputandlabel">
<label for="form5">Form5</label>
<input id="form5" type="text" />
</div>
<div id="il6" class="inputandlabel">
<label for="form6">Form6</label>
<input id="form6" type="text" />
</div>
</div>
</div>
</div>
You can see from the two snippets, that by setting display: none; on the label scrambles the layout. display: none; takes the element out of the flow (not the DOM itself, but from the object flow), while visibility: hidden; just makes the element invisible. Quite a difference, isn't it?
So, setting the display CSS property to none "removes the height" that kept your layout in order - try setting the elements visibility to hidden with JS.
If that's not working, then give the form-group a fixed height (the height with success / error message), and don't change that value on success / error.

Why does jquery.validate.js show error messages twice?

I am trying to create form with jQuery validation and this is my form,
Then I am using this code to validate the inputs.
It's just plain and simple:
$('#forgot_pwd').validate({
debug: true,
rules: {
username: {
minlength: 6,
required: true,
},
email: {
required: true,
email: true
}
},
messages: {
username: {
required: "Enter your Username"
},
email: {
required: "Enter your Email",
email: "Enter valid email address"
},
},
errorPlacement: function(error, element) {
error.hide();
$('.messagebox').hide();
error.appendTo($('#alert-message'));
$('.messagebox').slideDown('slow');
},
highlight: function(element, errorClass, validClass) {
$(element).parents('.control-group').addClass('error');
},
unhighlight: function(element, errorClass, validClass) {
$(element).parents('.control-group').removeClass('error');
$(element).parents('.control-group').addClass('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.16.0/jquery.validate.min.js"></script>
<div class="card">
<h4 class="l-login">Forgot Password</h4>
<div class="messagebox">
<div id="alert-message"></div>
</div>
<form class="col-md-12" id="forgot_pwd" method="POST">
<div class="form-group form-float">
<div class="form-line">
<input type="text" class="form-control" id="username" name="username">
<label class="form-label">Username</label>
</div>
</div>
<div class="form-group form-float">
<div class="form-line">
<input type="email" class="form-control" id="email" name="email">
<label class="form-label">Email</label>
</div>
</div>
<button id="signin" type="submit" class="btn btn-raised waves-effect bg-red" data-loading-text="Loading...">Reset Password</button>
SIGN UP<br/><br/>
</form>
</div>
As for me I am calling the error message box only once but it shows up twice.
Not sure why it shows up twice.
why is that?

Try using the invalidHandler function to empty it.
invalidHandler: function() {
$('#alert-message').empty();
}
This will empty the #alert-message when the form is submitted and your rules fail. This will allow the errorPlacement function to be called multiple times without emptying #alert-message on multiple errors.
For example in your code.
$('#forgot_pwd').validate({
debug: true,
rules: {
username: {
minlength: 6,
required: true,
},
email: {
required: true,
email: true
}
},
messages: {
username: {
required: "Enter your Username"
},
email: {
required: "Enter your Email",
email: "Enter valid email address"
},
},
errorPlacement: function(error, element) {
error.hide();
$('.messagebox').hide();
error.appendTo($('#alert-message'));
$('.messagebox').slideDown('slow');
},
highlight: function(element, errorClass, validClass) {
$(element).parents('.control-group').addClass('error');
},
unhighlight: function(element, errorClass, validClass) {
$(element).parents('.control-group').removeClass('error');
$(element).parents('.control-group').addClass('success');
},
invalidHandler: function() {
$('#alert-message').empty();
}
});

I think you should clear $('#alert-message') before adding new message to it.
errorPlacement: function(error, element) {
error.hide();
$('.messagebox').hide();
$('#alert-message').empty()
error.appendTo($('#alert-message'));
$('.messagebox').slideDown('slow');

Trouble with validate() on jquery

I have html like these
<form class="form-filter" id="form-filter-excel" role="form">
<div class="row">
<div class="col-md-4 col-sm-5">
<label>Date range</label>
<div class="input-group input-daterange datepicker">
<input id="fRange" name="fRange" class="form-control input-sm" type="text">
<span class="input-group-addon bg-primary">to</span>
<input id="sRange" name="sRange" class="form-control input-sm" type="text">
</div>
</div>
<div class="col-md-2 col-sm-1">
<label>
</label>
<a class="btn btn-wide btn-primary form-control" href="#" id="btnexport" ><i class="fa fa-file-excel-o"></i> Export To Excel</a>
</div>
</div>
</form>
end here my screen shoot
My question i wanna use validate() on jquery, but i'm kinda stuck i wanna use class= "input-daterange" as field, and the input fRange and sRange as required. How do i did that, if i using fRange and sRange as field, the error massage show up mess. Any idea??
UPDATE :
Sorry for not unclear my question
I'm using jquery validate like these
$('#form-filter-excel').validate({
highlight: function(element) {
$(element).closest('.form-group').prop('required',true);
},
unhighlight: function(element) {
$(element).closest('.form-group').prop('required',false);
},
errorElement: 'span',
errorClass: 'help-block',
errorPlacement: function(error, element) {
if(element.parent('.input-group').length) {
error.insertAfter(element.parent());
} else {
error.insertAfter(element);
}
},
rules: {
fRange: {
required: true,
date: true
},
sRange: {
required: true,
date: true
}
},
messages: {
fRange: "Please insert these input",
sRange: "Please insert these input"
},
});
$('#btnexport').click(function() {
$('#form-filter-excel').valid();
if($('#form-filter-excel').valid()==true)
{
var Fod = $('#fRange').val();
var Tod = $('#sRange').val();
window.open(host+"ajax/excelpoinfo?Fod=" + Fod +"&Tod=" + Fod, '_blank');
}
});
but the problem is the error massage not show under my input but show error like these on my screen
What i need is the error massage show on under each my input.
UPDATE:
I change my mind, i'm using sweet alert then, tq for helping. And for Mayank Pandeyz, u didnt see my question clearly, like i said, that not helping, even u said change replacement. Still not work.

On both the textbox provide the name attribute with its values like:
<form id="frmDetails" name="frmDetails">
<input type="textbox" name="fRange">
<input type="textbox" name="sRange">
</form>
And put the validation code on these like:
$('#frmDetails').validate({
rules:
{
fRange: {
required: true
},
sRange: {
required: true
}
},
messages:
{
fRange: {
required: "Please select fRange"
},
sRange: {
required: "Please select sRange"
}
}
});
Working Fiddle

JQuery validate not showing error

for some reason having issues with JQuery validate even though I have used similar code previously. I have a simple form.
<form id="emailform" class="form-horizontal emailType" role="form">
<div class="form-group">
<label for="inputTitle" class="col-lg-4 control-label">Title</label>
<div class="col-lg-8">
<select class="form-control" id="inputTitle" name="inputTitle">
<option value="">Please select...</option>
<option value="Mr">Mr</option>
<option value="Mrs">Mrs</option>
</select>
</div>
</div>
<div class="form-group">
<label for="inputName" class="col-lg-4 control-label">First Name(s)</label>
<div class="col-lg-8">
<input type="text" class="form-control" id="inputName" name="inputName" placeholder="First Name(s)">
</div>
</div>
<div class="form-group">
<label for="inputSurname" class="col-lg-4 control-label">Surname</label>
<div class="col-lg-8">
<input type="text" class="form-control" id="inputSurname" name="inputSurname" placeholder="Surname">
</div>
</div>
<div class="form-group">
<label for="inputMethod" class="col-lg-4 control-label">Delivery Method</label>
<div class="col-lg-8" id="radioAlign">
<input type="radio" value="email" id="inputMethod" checked><span id="emailText">Email</span>
</div>
</div>
<div class="form-group">
<label for="inputEmail" class="col-lg-4 control-label">Email</label>
<div class="col-lg-8">
<input type="email" class="form-control" id="inputEmail" name="inputEmail" placeholder="Your Email">
</div>
</div>
<div class="form-group">
<label for="inputLinks" class="col-lg-4 control-label">Link to be sent</label>
<div class="col-lg-8">
<select class="form-control" id="inputLinks" name="inputLinks">
<option value="img/default.jpg">Please select...</option>
<option value="img/placeholder.jpg">Email1</option>
<option value="img/placeholder2.jpg">Email2</option>
</select>
</div>
</div>
<div class="form-group">
<div class="col-lg-offset-2 col-lg-10">
<button type="submit" class="btn btn-default">
Send Message
</button>
</div>
</div>
</form>
<div id="error"></div>
I then have my validation.
$.validator.addMethod(
"notEqualTo",
function(elementValue,element,param) {
return elementValue != param;
},
"Value cannot be {0}"
);
$.validator.addMethod("myCustomRule", function(value, element) {
return /^(([^<>()[\]\\.,;:\s#\"]+(\.[^<>()[\]\\.,;:\s#\"]+)*)|(\".+\"))#((\[[0-9{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\])|(([a-zA-Z\-0-9]+\.)+[a-zA-Z]{1,}))$/.test(value);
}, "Please enter a valid email");
var validator = $("#emailform").validate({
errorPlacement: function (error, element) {
$(element)
.closest("form")
.find("#error")
.append(error);
},
rules: {
inputTitle: {
required: true,
notEqualTo: "Please select..."
},
inputName: {
required: true,
minlength: 1
},
inputSurname: {
required: true,
minlength: 1
},
inputEmail: {
required: true,
myCustomRule: true,
minlength: 5,
email: true
},
inputLinks: {
required: true,
notEqualTo: "Please select..."
}
},
messages: {
inputName: {
minlength: jQuery.validator.format("Please enter a valid name")
},
inputSurname: {
minlength: jQuery.validator.format("Please enter a valid surname")
},
inputEmail: {
minlength: jQuery.validator.format("Your email address is to short")
}
},
submitHandler: function(){
//Do success stuff here
return true;
},
invalidHandler: function(event,validator) {
//do error stuff here
return false;
}
});
If I submit the form, my error message does not display. Instead, the input gets highlighted with a blue border.
Is there any reason my errors do not display?
Thanks

I have update your validation massage code;
Please check this,
$.validator.addMethod(
"notEqualTo",
function(elementValue,element,param) {
return elementValue != param;
},
"Value cannot be {0}"
);
$.validator.addMethod("myCustomRule", function(value, element) {
return /^(([^<>()[\]\\.,;:\s#\"]+(\.[^<>()[\]\\.,;:\s#\"]+)*)|(\".+\"))#((\[[0-9{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\])|(([a-zA-Z\-0-9]+\.)+[a-zA-Z]{1,}))$/.test(value);
}, "Please enter a valid email");
var validator = $("#emailform").validate({
errorPlacement: function (error, element) {
$(element)
.closest("form")
.find("#error")
.append(error);
},
rules: {
inputTitle: {
required: true,
notEqualTo: "Please select..."
},
inputName: {
required: true,
minlength: 1
},
inputSurname: {
required: true,
minlength: 1
},
inputEmail: {
required: true,
myCustomRule: true,
minlength: 5,
email: true
},
inputLinks: {
required: true,
notEqualTo: "Please select..."
}
},
messages: {
inputName: {
minlength: jQuery.validator.format("Please enter a valid name")
},
inputSurname: {
minlength: jQuery.validator.format("Please enter a valid surname")
},
inputEmail: {
minlength: jQuery.validator.format("Your email address is to short")
}
},
errorPlacement: function (label, element) { // render error placement for each input type
$('<span class="error"></span>').insertAfter(element).append(label)
var parent = $(element).parent('.input-with-icon');
parent.removeClass('success-control').addClass('error-control');
},
highlight: function (element) { // hightlight error inputs
var parent = $(element).parent();
parent.removeClass('success-control').addClass('error-control');
},
unhighlight: function (element) { // revert the change done by hightlight
var parent = $(element).parent();
parent.removeClass('error-control').addClass('success-control');
},
submitHandler: function(){
//Do success stuff here
return true;
},
invalidHandler: function(event,validator) {
//do error stuff here
return false;
}
});
does it work or not? let me know

Form is not validate using validate.min.js

Hi I succeed to make this code works but I don't know why this code is not working anymore anyone can help please on this?
Here this is my form
<form action="CreateUser" method="POST" id="subscribe">
<br>
<div class="form-group">
<div class="input-group">
<span class="input-group-addon"><b>#</b></span>
<label for="mail"></label>
<input type="text" class="form-control" name="mail" id="mail" placeholder="Adresse mail">
</div>
</div>
<div class="form-group">
<div class="input-group">
<span class="input-group-addon"><span class="fa fa-user"></span></span>
<label for="firstname"></label>
<input type="text" class="form-control" name="firstname" id="firstname" placeholder="Entrez votre prenom">
</div>
</div>
<div class="form-group">
<div class="input-group">
<span class="input-group-addon"><span class="fa fa-user"></span></span>
<label for="name"></label>
<input type="text" class="form-control" name="name" id="name" placeholder="Entrez votre nom">
</div>
</div>
<div class="form-group">
<div class="form-group">
<div class="input-group">
<span class="input-group-addon"><span class="fa fa-lock"></span></span>
<label for="inputPassword"></label>
<input id="inputPassword" name="inputPassword" type="password" class="form-control" placeholder="Mot de passe">
</div>
</div>
<div class="input-group">
<span class="input-group-addon"><span class="fa fa-lock"></span></span>
<label for="txtConfirmPassword"></label>
<input id="txtConfirmPassword" name="txtConfirmPassword" type="password" class="form-control" placeholder="Retapez votre mot de passe">
</div>
</div>
<br>
<div class='modal-footer'>
<button class="btn btn-lg btn-success btn-block" name="submit" id="register" >Creer votre compte</button>
</div>
</form>
And here this the validate function I did:
<script>
$.validator.setDefaults({
debug: true,
success: "valid",
highlight: function (element) {
$(element).parent().removeClass('has-success').addClass('has-error');
},
unhighlight: function (element) {
$(element).parent().removeClass('has-error').addClass('has-success');
},
errorElement: 'span',
errorClass: 'text-danger',
errorPlacement: function (error, element) {
if (element.parent('.input-group').length) {
error.insertAfter(element.parent());
} else {
error.insertAfter(element);
}
}
});
$.validator.addMethod("onlyletters", function (value, element) {
return this.optional(element) || /^[a-zA-ZáàâäãåçéèêëíìîïñóòôöõúùûüýÿæœÁÀÂÄÃÅÇÉÈÊËÍÌÎÏÑÓÒÔÖÕÚÙÛÜÝŸÆŒ._\s-]+$/i.test(value);
}, "Please enter letters only.");
$.validator.addMethod("passwd", function (value, element) {
return this.optional(element) || /^[a-zA-Z0-9]+$/i.test(value);
}, "Please enter letters and numbers only.");
$('#subscribe').validate({
rules: {
inputPassword: {
required: true,
minlength: 6,
maxlength: 12,
passwd: true
},
txtConfirmPassword: {
required: true,
minlength: 6,
maxlength: 12,
passwd: true,
equalTo: "#inputPassword"
},
mail: {
required: true,
email: true
},
firstname: {
required: true,
maxlength: 20,
onlyletters: true
},
name: {
required: true,
maxlength: 20,
onlyletters: true
}
},
messages: {
inputPassword: {
required: "Password is required",
minlength: "Your password must have 6 characters."
},
txtConfirmPassword: {
required: "Password is required",
minlength: "Your password must have 6 characters.",
equalTo: "Your password doesn't match."
},
mail: {
required: "Email is required",
email: "Your mail address should be like user#example.com"
}
}
});
$('#register').click( function() {
// Error checking here.
if ($('div.error').is(':visible')) {
return false;
}else{
}
});
</script>
And the imported jquery plugin
<script src="http://code.jquery.com/jquery-1.11.1.min.js"></script>
<script src="http://jqueryvalidation.org/files/dist/jquery.validate.min.js"></script>
<script src="http://jqueryvalidation.org/files/dist/additional-methods.min.js"></script>
The plugin are imported from a previous page index.html and this form is loading from a modal

There is a problem on your .click() syntax, here is the working code in a JSFiddle.
Your error was a } and ) problem.

Your click event handler is not correct.
$('#register').click( function() {
// Error checking here.
if ($('div.error').is(':visible')) {
return false;
}else{
});// This needs to be removed!!!!!
}
});
Working code:
$('#register').click( function() {
// Error checking here.
if ($('div.error').is(':visible')) {
return false;
} else {
}
});