Form fields not being added ng-touched class, instead remains ng-pristine
This is my form:
<form novalidate class="css-form">
<div class="form-group clearfix">
<label class="col-xs-12 col-sm-6 col-md-4">State Code</label>
<div class="col-xs-12 col-sm-6 col-md-8">
<input type="text" class="form-control" ng-maxlength="2" ng-model="ObjectNew.stateCode" required>
</div>
</div>
<div class="clearfix"></div>
<div class="form-group clearfix">
<label class="col-xs-12 col-sm-6 col-md-4">Zip</label>
<div class="col-xs-12 col-sm-6 col-md-8">
<input type="text" class="form-control" ng-model="ObjectNew.zip" required>
</div>
</div>
<div class="clearfix"></div>
</form>
When I see in inspect element, it does show only ng-pristine class on each field, even if i went through both fields and leaves null.
It shows ng-invalid too, which is fine.
Have to add the styles actually:
.css-form input.ng-invalid.ng-touched {
background-color: #FA787E !important;
}
.css-form input.ng-valid.ng-touched {
background-color: #78FA89 !important;
}
The term pristine and touched are not similar. An input will remain pristine as long as it has not been modified. It is untouched, as long as it didn't loose focus - Angular doc states that ng-touched is applied when "the control has been blurred".
So it is possible for an input to be pristine and touched - just click it, and then click somewhere else without typing anything in.
It is also possible for it to be dirty and untouched - click it, type in some text, but do not click anywhere else.
To see that, and see working ng-touched in action, refer to this jsFiddle.
To make sure it works, use Angular 1.3 as pointed out by #dfsq. Also, use angular-touch which matches your Angular version. The JSFiddle above works correctly.
Related
View:
I have a form with two select fields : The second one only activates when a choice in the first one has been made and the content shown is relative to the first field.
Model :
Establishment (id,name)
Account (id,Establishment)
Logic : The first field loads a list of establishment from the model attribute "etablissements" that the Controller loads.
The second field should then enable itself after a selection has been made (easy), but then it should also show a list of accounts that are "registered" to this Establishment.
The question is how do i set this kind of conditional statement in thymeleaf, knowing that I have access to all establishments and account in the template as shown here :
<form id="demo-form2" data-parsley-validate
class="form-horizontal form-label-left" action="addOP"
th:object="${paiement}" method="post">
<div class="form-group">
<label class="control-label col-md-3 col-sm-3 col-xs-12"
for="first-name"> Compte <span class="required">*</span>
</label>
<div class="col-md-6 col-sm-6 col-xs-12">
<select class="form-control" th:field="*{idCompte}">
<option th:each="account : ${etablissements}"
th:text="${etablissement.name}" th:value="${etablissement.name}">Choose
Etablissement</option>
</select>
</div>
</div>
<div class="form-group">
<label class="control-label col-md-3 col-sm-3 col-xs-12"
for="first-name"> Imputation <span class="required">*</span>
</label>
<div class="col-md-6 col-sm-6 col-xs-12">
<select class="form-control" disabled="disabled">
<option th:each="account : ${accounts}"
th:text="${account.owner}" th:value="${account.id}">Compte</option>
</select>
</div>
</div>
What's the best way to do this using thymeleaf or javascript ?
PS : Sorry for the formatting haven't found a way to automatically remove those spaces from code.
You should still render the list using thymeleaf and give it a hidden class which sets it to display: none. Then with javascript you can add an eventlistener to the dropdown which looks for that specific value and removes the hidden class to show the list.
Edit: to filter the list you can put a data attribute on the element and show or hide the item based on that data
I am currently trying to make an entire Bootstrap input-group to be able to clickable so that the checkbox will be clicked when any part of the input-group is clicked, and it should be able to uncheck the checkbox as well when the input-group is clicked. The current code I have working right now is this:
$(document).ready(function(){
$('.input-group,#opt_in').click(function(){
if ($('#opt_in').is(':checked')) {
$('#opt_in').prop('checked', false);
}
else{
$('#opt_in').prop('checked', true);
}
});
});
<div class="input-group mb-3">
<div class="input-group-prepend">
<div class="input-group-text">
<input type="checkbox" name="opt_in" id="opt_in" value="true">
<label class="form-check-label">I CONFIRM</label>
</div>
</div>
<p class="form-control" aria-label="Text input with checkbox" id="consent">that all of my info is accurate and consent to be called as provided above</p>
</div>
But for some reason that I am unaware of, it's not working. Any reason why? I'm using jQuery here but I can also use vanilla javascript. I'm just not sure where my code is freaking out!
I'm trying to disable a materializecss button if the value of a particular input in a form is blank, but I can only successfully disable it using ng-disable if the form is $pristine, not on the input.
This works:
data-ng-disabled="mainDetailsForm.$pristine"
but this doesn't:
data-ng-disabled="mainDetailsForm.niNumberInput.$pristine"
and this doesn't:
data-ng-disabled="niNumberInput.$pristine"
-
JSFiddle: https://jsfiddle.net/6qswosh8/.
-
Full HTML:
<form id="mainDetailsForm" name="mainDetailsForm">
<div class="row">
<div input-field class="input-field col-xs-12 col-md-4">
<input id="niNumberInput" name="niNumberInput" type="text" class="validate" pattern=".{9}" placeholder="National Insurance Number">
<label for="niNumberInput" data-error="National Insurance number must be 9 characters long">National Insurance Number</label>
</div>
<div input-field class="input-field col-xs-12 col-md-1">
<button data-ng-disabled="mainDetailsForm.niNumberInput.$pristine" class="btn button waves-effect"><span class="fa fa-search"></span>Verify</button>
</div>
</div>
</form>
To access the properties of individual inputs through the form you need to give the input an ng-model. The ng-model property is what binds it. I updated your jsfiddle https://jsfiddle.net/dougefresh/6qswosh8/1/ ( I also had to get angular working properly in the fiddle).
<input id="niNumberInput" name="niNumberInput" ng-model="niNumberInput" type="text" class="validate" pattern=".{9}" placeholder="National Insurance Number">
This small line in the docs is important "To allow styling of form as well as controls, ngModel adds these CSS classes:" It lists $dirty, $pristine, etc.. The docs specifically say they are bound to ng-model.
https://docs.angularjs.org/guide/forms
I had a "I AGREE" form with XX fields with checkboxes.
This fields come from a SQL table and will be selected or created by the admin.
The Admin can create as many as he wants.
All checkboxes must be required.
There is any way to check and require all checkboxes with one Jquery Rule?
"agree[]": {
required : true,
},
<form class="form-horizontal" id="form" role="form" action="#" method="POST" autocomplete="off">
<div class="form-group has-feedback">
<label class="col-lg-4 col-md-4 col-sm-3 col-xs-3 control-label mLabelText"></label>
<div class="col-lg-8 col-md-8 col-sm-8 col-xs-8 form-space checkbox">
<label>
<input type="checkbox" id="agree1" name="agree[]" value="1">
CONDITION 1
</label>
</div>
</div>
<div class="form-group has-feedback">
<label class="col-lg-4 col-md-4 col-sm-3 col-xs-3 control-label mLabelText"></label>
<div class="col-lg-8 col-md-8 col-sm-8 col-xs-8 form-space checkbox">
<label>
<input type="checkbox" id="agree2" name="agree[]" value="2">
CONDITION 2
</label>
</div>
</div>
I try this - but Jquery only requires ONE checkbox, not All.
**** Because I need a "dynamic rule" for all checkboxes - I think this will be the best way to do this..
tks a lot!
It looks like your design is wrong for your needs. You should have separate names for separate checkboxes, as they reflect separate user actions (agreement with a new requirement). This way you will be able, for example, provide unique validation message per checkbox (you may not need this, but still this might a useful future option).
Assuming you have an array of items user should agree with called itemsToAgree and validation object where you defined "agree[]": { required: true } called validationObject, smth like that should work to set up validations:
for (var i = 0; i < itemsToAgree.length; ++i) {
validationObject['agree' + i] = {required: true}
}
after that, you have some sort of dynamic mark up generation, I guess. Use names there in the same format as in validationObject (agree<x>), and it should work.
I do not know your code, so my solution may be irrelevant in your concrete situation, but I think it anyway provides an approach to follow.
I have a form splitted in 4 steps (I made a form "wizard" using ng-switch), the submit button is on the last page of the wizard. I have some troubles making the angular form validation to work . It seems that the formName.$invalid only watches the inputs of the current step of the form.
<form name="carouselForm">
<div ng-switch="modal.getCurrentStep()" class="slide-frame">
<div ng-switch-when="general" class="wave row">
....
</div>
<div ng-switch-when="carousel" class="wave row">
<div class="col-md-12">
<div class="form-group"
ng-class="">
<label for="Title">
Title <span class="red">*</span>
</label>
<div>
<input id="Title"
ng-model="entityData.Title"
type="text"
required
placeholder="" class="form-control input-md">
</div>
</div>
</div>
</div>
<div ng-switch-when="details" class="wave row">
.....
</div>
<div ng-switch-when="description" class="wave row">
.....
</div>
</div>
</form>
I removed most of the form cause it would have been very long. In step two I left an input with the required tag. On this step the carouselForm.$invalid is properly set to true if this field is not set, but as soon as I change to the next step, carouselForm.$invalid is false again even if I didn't filled the required input.
It seems that the angular form validation doesn't watch the inputs in my other ng-switch block. Is there a way to make include them into the validation ?
Thank you very much !
You can replace ng-switch-when by ng-show, that way it doesn't get removed from the DOM, but is hidden using CSS.