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.

jquery validate custom validation not working

$(document).ready(function () {
jQuery.validator.addMethod("insz", function (value, element) {
var insz = $('#txtINSZ').val()
var controle = parseInt(insz.substring(13, 15))
var getal = insz.substring(0, 2) + insz.substring(3, 5) + insz.substring(6, 8) + insz.substring(9, 12)
var rest = parseInt(getal) % 97
alert("we doin' this mun")
return 97 - rest == controle;
}, "* Amount must be greater than zero");
$('#form1').validate({
rules: {
txtINSZ: {
required: $('#cbInsz').prop('checked') == false,
insz: function () {
$('#cbInsz').prop('checked') == true;
}
}
},
showErrors: function (errorMap, errorList) {
this.defaultShowErrors();// to display the default error placement
}
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdn.jsdelivr.net/jquery.validation/1.16.0/jquery.validate.js"></script>
<form method="post" action="#" id="form1" a="" novalidate="novalidate">
<div id="container">
<div class="container-fluid">
<div class="col-xs-12">
<div class="form-horizontal col-xs-4" id="divDimLeft">
<span id="lblTitleAlgemeen">Algemen Informatie</span>
<div class="checkbox" style="margin-left:20px;">
<span id="lblCheck">
<input type="checkbox" id="cbInsz" checked="">
INSZ nummer werknemer gekend?
</span>
</div>
<div class="form-group" id="divINSZ">
<span id="lblINSZ" class="required" for="txtINSZ" aria-required="true">INSZ-nummer gekend?</span>
<input name="ctl00$ContentPlaceHolder1$txtINSZ" type="text" maxlength="15" id="txtINSZ" class="form-control required form valid" oninput="autoInvullen()" aria-required="true" placeholder="__.__.__-___.__" aria-invalid="false" required=""><label id="txtINSZ-error" class="error" for="txtINSZ" style="display: none;"></label>
</div>
<div class="form-group">
<span id="lblNaam" class="required" for="txtNaam" aria-required="true">Naam</span>
<input name="ctl00$ContentPlaceHolder1$txtNaam" type="text" maxlength="40" id="txtNaam" class="form-control form requiredField error" aria-required="true" aria-invalid="true"><label id="txtNaam-error" class="error" for="txtNaam">Dit veld is verplicht.</label>
</div>
<div id="divButton" class="text-right" style="width: 87.5%">
<input type="submit" name="ctl00$ContentPlaceHolder1$btnSubmit" value="Volgende" id="btnSubmit" class="btn btn-primary col-xs-2" style="float: none; min-width:200px;">
</div>
</div>
</div>
</div>
</div>
</form>
I wanted to make a custom validator but for some reason it's not working at all. The required does work so there is no issue with finding the elements in my page. So is there someone who has any idea why it is not working?
Thans in advance, under here you find the code i'm using including the method I wrote and the start of the validate method.

You can't just insert a comparison operator all by itself as the parameter; you need a function that returns the value of this parameter, in this case a boolean from the comparison operator...
$('#form1').validate({
rules: {
txtINSZ: {
required: function() {
return $('#cbInsz').prop('checked') == false;
},
insz: function() {
return $('#cbInsz').prop('checked') == false;
}
....

Solved it, I just putted the rules out of the rules section. After the validation code I putted this:
$('#txtINSZ').rules("add", {
required:true,
insz:true
})
Works perfectly.

I also faced the same situation, but in my case below two steps worked.
use data-rule-insz="true" attribute on your HTML input element for which you want custom validation.
also add a name attribute as mentioned in the below example:-
<input id="customer" name="customer" data-rule-insz="true" required type="text" class="typeahead form-control" />

How to enable disable a select drop down list using radio buttons with angularjs?

I have been searching all over for the internet looking on how to enable or disable this drop down list using radio buttons specifically when the radio button value is equal to prof the drop down list should be disabled, but with no help. I did come up with an example but didn't work. Any help would be appreciated.
registration.html
<div class="form-group">
<label class="col-lg-2 col-md-3 control-label">Qualification</label>
<div class="col-lg-10 col-md-9">
<div class="radio-custom radio-inline">
<input type="radio" ng-model="QualificationDetails.qualification_type" value="edu" name="radio1" id="radio4">
<label for="radio4">Educational</label>
</div>
<div class="radio-custom radio-inline">
<input type="radio" ng-model="QualificationDetails.qualification_type" value="prof" name="radio1" id="radio5">
<label for="radio5">professional</label>
</div>
</div>
</div>
//This is the drop down that I need to diable
<div class="form-group">
<label class="col-sm-2 control-label" for="Qulitype">Qualification type</label>
<div class="col-sm-10">
<select name="repeatSelect" id="repeatSelect" ng-disabled="QualificationDetails.qualification_type == 'prof'" ng-model="QualificationDetails.qualification" class="form-control">
<option ng-repeat="quali in qualiLevel" value="{{quali.qualification_id}}">{{quali.quali_level}}</option>
</select>
</div>
</div>
This is the code I implemented to work above scenario. But didn't work :(
regController.js
$scope.$watch('QualificationDetails.qualicication_type', function (QualiType) {
if (angular.isUndefined($scope.QualificationDetails)) {
return;
}
if (QualiType === 'prof') {
$scope.QualificationDetails.qualification_type = $scope.QualiType;
}
else {
if ($scope.QualificationDetails.qualification_type !== null) {
$scope.QualiType = $scope.QualificationDetails.qualification_type;
$scope.QualificationDetails.qualification_type = null;
}
}
});
the above scenario is that when it comes to qualifications if qualification type is equal to professional (prof) drop down list is disabled and when it is educational the drop down list should be enabled. Any idea on how to achieve this.
This is the Quality level json. I get it through the qualitylevel.service.
(function initController() {
deptService.getdepts(function (res) {
$scope.depts = JSON.parse(res.data);
});
qualiService.getquali(function (res) {
console.log("inside ");
$scope.qualiLevel = JSON.parse(res.data);
});
console.log("inside service");
})();

It seems to me, that your code works fine without watcher you have added. I hope I understood what you want correctly. Try this snippet:
angular
.module('app', [])
.controller('Ctrl', function($scope) {
$scope.qualiLevel = [
{quali_level: 'A', qualification_id: 1},
{quali_level: 'B', qualification_id: 2}
];
});
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.7/angular.min.js"></script>
<div ng-app="app">
<div ng-controller="Ctrl">
<div class="form-group">
<label class="col-lg-2 col-md-3 control-label">Qualification</label>
<div class="col-lg-10 col-md-9">
<div class="radio-custom radio-inline">
<input type="radio" ng-model="QualificationDetails.qualification_type" value="edu" name="radio1" id="radio4">
<label for="radio4">Educational</label>
</div>
<div class="radio-custom radio-inline">
<input type="radio" ng-model="QualificationDetails.qualification_type" value="prof" name="radio1" id="radio5">
<label for="radio5">professional</label>
</div>
</div>
</div>
<div class="form-group">
<label class="col-sm-2 control-label" for="Qulitype">Qualification type</label>
<div class="col-sm-10">
<select name="repeatSelect" id="repeatSelect" ng-disabled="QualificationDetails.qualification_type == 'prof'" ng-model="QualificationDetails.qualification" class="form-control">
<option ng-repeat="quali in qualiLevel" value="{{quali.qualification_id}}">{{quali.quali_level}}</option>
</select>
</div>
</div>
</div>
</div>

As the control is radiobutton, your QualificationDetails.qualification_type value will be set to 1 or 0 and not to the label value. You have to have different variables for two radio buttons. Based on their value you have to set QualificationDetails.qualification_type = 'prof' or something
You can also try $parent.QualificationDetails.qualification_type instead as answered in How can I get the value of the checked radio button when submitting a form using angularjs?

Thanks everyone for helping me out. Just felt wanted to show I implemented it correctly and other programmers to increase their knowledge. Using $watch to temporaly hide the drop down list details).
the registrationController.js
$scope.$watch('QualificationDetails.qualification_type', function (Val) {
if (angular.isUndefined($scope.QualificationDetails))
return;
if (Val !== 'prof') {
$scope.QualificationDetails.qualification = $scope.tempValue;
}
else {
if ($scope.QualificationDetails.qualification !== null) {
$scope.tempValue = $scope.QualificationDetails.qualification;
$scope.QualificationDetails.qualification = null;
}
}
});
Implemented through this example.

How to validate element directive in angularjs

I want to validate multi-select in angularjs. At least one item should be selected in multi-select. If not then submit button should not enable. I am using require to validate the form. I am able to make compulsory selection of first name by using require, but how do also compulsory for multiselect.
Form
<form ng-submit='addStudent()' name='studentForm' novalidate="">
<div class="col-md-4">
<div class="col-md-12">
<label for="Name">First Name *</label>
<input ng-model='student.first_name' name="name" type="text" placeholder="First Name" required class="form-control">
</div>
</div>
<div class="col-md-4">
<div class="col-md-12">
<label for="Name">Last Name </label>
<input ng-model='student.last_name' name="name" type="text" placeholder="Last Name" class="form-control">
</div>
</div>
<multi-selection selectedsubjs="student.selectedSubjects"
allsubjects="allSubjects"
left-title="All Subjects"
right-title="Selected Subjects">
</multi-selection>
<input ng-disabled="sutudentForm.$invalid" type="submit">
</form>
Element Directive
app.directive('multiSelection', function(){
return {
restrict: 'E',
scope: {
allsubjects: '=',
selectedsubjs: '=',
displayAttr: '#',
leftTitle: '#',
rightTitle: '#'
},
templateUrl: "templates/multiSelection.html",
link: function(scope) {
scope.swapsubject1 = function(item) {
var index = scope.allsubjects.indexOf(item);
scope.allsubjects.splice(index, 1);
scope.selectedsubjs.push(item);
}
scope.swapsubject2 = function(item) {
var index = scope.selectedsubjs.indexOf(item);
scope.selectedsubjs.splice(index, 1);
scope.allsubjects.push(item);
}
}
};
});
Multi-Select Template
<tr>
<td>
<div class="entBox">
<switchitem ng-repeat="subj in allsubjects" value="subj.name" ng-click="swapsubject1(item)" ng-model="allSubjects"></switchitem>
</div>
</td>
<td>
<div class="entBox">
<switchitem ng-repeat="subj in selectedsubjs" value="subj.name" ng-click="swapsubject2(item)" ng-model="student.selectedSubjects"></switchitem>
</div>
</td>
</tr>

Check this element is not a input type then set
if (!element.isInput()) {
element[0].setCustomValidity(errorMsg);
}
reference

ng-disabled in Angular validation not working as expected

http://plnkr.co/edit/9Yq6aZHtKCuZMtPbjBIN?p=preview
I've tried and tried to get this to work but I've had no luck. I'm trying to disable the submit button using angularJS and the built in validation function. What I find is that when you first load the form, the submit button is active--not disabled!
I've tested and tried and I've found that my validation code accepts an empty string / null string in the Team Name, despite me requiring the input.
Does anyone know how to format this correctly? The ONLY way I've gotten it to work is to fudge the data with replacing an empty string with a single space...in production this is unacceptable...
Here is the index.html:
<body ng-controller="EnterController as enter">
<div class="panel panel-primary">
<div class="panel-body">
<form name="enterFormNew" ng-submit="enter.TeamNameNext()" autocomplete="off" novalidate>
<div class="row">
<div class="col-xs-8 col-md-6">
<div class="form-group">
<label for="teamname">Team Name</label>
<input name="TeamName" ng-required ng-minlength="2" ng-maxlength="40" ng-model="enter.Team.Name" type="text" id="teamname" class="form-control" />
<p ng-show="enterFormNew.TeamName.$touched && enterFormNew.TeamName.$invalid">This is not a valid team name.</p>
</div>
<div class="form-group">
<label for="division">Division</label>
<select name="selectDivision" ng-required ng-model="enter.Team.Division" id="division" class="form-control" ng-options="division.Name for division in enter.Divisions track by division.Id ">
<option value="">Select...</option>
</select>
<p ng-show="enterFormNew.selectDivision.$touched && enterFormNew.selectDivision.$invalid">A valid Division needs to be selected.</p>
</div>
</div>
</div>
<div class="row">
<div class="col-xs-2">
<button type="submit" class="btn btn-primary" ng-disabled="enterFormNew.$invalid">Next</button>
</div>
</div>
</form>
</div>
</div>
</body>
And here is the app.js:
angular.module('Enter', [])
.controller("EnterController", [
function() {
this.RegistrationPhase = 0;
this.Divisions = [{ Id: 1,Name: "Normal"}, {Id: 2,Name: "Not Normal"}];
this.Team = { Name: "", ResumeKey: null, Division: { Id: -1 }, Players: []};
this.TeamNameNext = function() {
//Code removed
alert("Made it to the submit function!")
};
}
]);

the attribute ng-required requires a value. Don't get confused with HTML5 attribute required that doesn't require a value.
ng-required="true"

Because "Team.Division" is not undefined in your controller code.
If you could use the code below, you will get what you extected.
this.Team = { Name: "", ResumeKey: null, Division: undefined, Players: []};
You can use null or "" instead of undefined.