Develop Reference

Loop through all inner elements of HTML and check if field is required

I'm working on a complex multipage form using HTML, Bootstrap and JavaScript.
What I'm trying to figure out is to validate each section of the multipage form and check if all required fields (if any) are actually valid so that the user can proceed to next section in the form.
The following code snippet is a simplification of my modified form:
<div class="card">
<form id="myform">
<div class="card-body">
<div class="section-1">
<div class="field-1">
<fieldset>...</fieldset>
<input required id="input-field-1">
</div>
<div class="field-2">
<fieldset>...</fieldset>
<select required id="input-field-2">
</div>
<div class="field-3">
<fieldset>...</fieldset>
<div class="nested NODE">
<input required id="input-field-3">
</div>
</div>
<div class="field-4">
<fieldset>...</fieldset>
<div class="nested NODE">
<div class="really nested NODE">
<div class="very big nested NODE">
<input required id="input-field-4">
</div>
</div>
</div>
</div>
</div>
</div>
</form>
</div>
What is the most efficient way of getting all required fields? For now I'm iterating through each item in the section-1 and get the inner parts to check validity. But using my code below, it will not work on complex nested nodes. How to prevent that?
function find("required", section_number) {
let elements = document.getElementById("form_section_" + section_number);
let children = document.getElementById("form_section_" + section_number).children;
console.log(children);
for(var i=0; i<children.length; i++){
console.log(children[i].childNodes.length);
if(children[i].childNodes.length == 0){
if (children[i].childNodes.required) {
console.log('✅ element is required');
} else {
console.log('⛔️ element is not required');
}
}
else{
for(var y=0; y<children[i].childNodes.length; y++){
console.log("inner loop = " + i + ":" + y);
if (children[i].childNodes[y].required) {
console.log('✅ element is required');
} else {
console.log('⛔️ element is not required');
}
}
}
}
return false;
}

If you just want to check if your form is valid, use checkValidity(). If you want some custom handling, you could try selecting all the possible fields and then loop over them to validate the field individually.
For instance: (this list is not complete)
document.querySelectorAll('input, select, textarea');

Check input modified in html without using form Angular 6

How to check if input is modified in html code, without using any form
I have below code
<textarea #txt (change)="data.url = txt.value" placeholder="https://"
[value]="data.url" ></textarea>
<span *ngIf="!txt.value">
<span class="">Required</span>
</span>
<span *ngIf="txt && txt.dirty && !customValidationService.urlValidator(txt.value)">
<span class="">Invalid</span>
</span>
Please help,
Thanks

Semantic UI, change class with JavaScript

I have an input code as below:
<div class="ui form">
<div id="wlsdom" class="ui icon input">
<input type="text" id="wlsname" name="wlsname" placeholder="WLS domain...">
<i class="disk outline icon"></i>
</div>
</div>
<button onclick="validation();" class="ui green button"><i class="eye icon">
</i>Show URL</button>
Here when i click on "show URL" button, its calling function named 'validaion()'. So in my js file the function validation is as follows:
function validation()
{
if (document.getElementById('wlsname').value == '')
{alert("Please enter domain name");
document.getElementById('wlsdom').classList.remove('ui icon input');
document.getElementById('wlsdom').classList.add('ui icon input error');
}
So basically what I'm trying to do is form validation. I want to change the class of the input element from default to error state if the field is empty. But somehow the script is not working. Or am I using it in the wrong way. Please help me. Thanks!

The classList.add() function cannot include space in its argument. If you want to add multiple class at a time, separate them with the , symbol. In your case, just use:
document.getElementById('wlsdom').classList.add('error');
and remove this line :
document.getElementById('wlsdom').classList.remove('ui icon input');
See about classList.add() function here

You can use element.classList += ' myClass' to add a class
const wlsdom = document.getElementById('wlsdom');
function validation() {
if (!wlsdom.value || wlsdom.value == '') {
alert("Please enter domain name");
wlsdom.classList += ' error';
}else{
wlsdom.classList -= ' error';
}
}
<link href="https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.2.10/semantic.min.css" rel="stylesheet" />
<div class="ui form">
<div id="wlsdom" class="ui icon input">
<input type="text" id="wlsname" name="wlsname" placeholder="WLS domain...">
<i class="disk outline icon"></i>
</div>
</div>
<button onclick="validation();" class="ui green button"><i class="eye icon">
</i>Show URL</button>

function validation()
{
if (document.getElementById('wlsname').value == '') {
alert("Please enter domain name");
document.getElementById('wlsdom').classList.remove('ui icon input');
document.getElementById('wlsdom').classList.add('ui icon input error');
}
it seems u lost a '}'.

You could use error class only, not with all classes .And add else statement if is not empty to remove the error class.
function validation() {
if (document.getElementById('wlsname').value == '') {
alert("Please enter domain name");
document.getElementById('wlsdom').classList.add('error');
}
else{
document.getElementById('wlsdom').classList.remove('error');
}
}
.error{
border:1px solid red;
}
<div class="ui form">
<div id="wlsdom" class="ui icon input">
<input type="text" id="wlsname" name="wlsname" placeholder="WLS domain...">
<i class="disk outline icon"></i>
</div>
</div>
<button onclick="validation();" class="ui green button"><i class="eye icon">
</i>Show URL</button>

Is JQuery breaking my functionality?

I am making an app, the user can either select an item or use their camera to get the qr code which translates into an item's ID.
The problem is that I think some JQuery is messing with my scope from working properly.
I have to get the QR code by listening to an innerHtml change, once it changes (DOMSubtreeModified) the following occurs.
var index = 0;
$('#result').one('DOMSubtreeModified', function(e) {
var code = "";
if (e.target.innerHTML.length > 0) {
code = e.target.innerHTML;
$scope.ToRun(code);
}
});
$scope.ToRun = function(code) {
for (i = 0; i < $scope.plantList.length; i++) {
if ($scope.plantList[i].plantcode == code) {
index = i;
break;
}
}
$scope.currentPlant = $scope.plantList[index];
$scope.plantDetails = false;
$scope.searchDetails = true;
}
For some reason the following does not have any effect on my ng-classes. As when an item is selected I hide the input dialogs, and show the result one.
$scope.plantDetails = false;
$scope.searchDetails = true;
But when a user selects the item manually it works just perfectly. (the items have an ng-click on it)
$scope.viewPlant = function(plant) {
$scope.currentPlant = plant
$scope.plantDetails = false;
$scope.searchDetails = true;
};
And the above works fine, with the ng-click. So why won't my new function that listens for an innerHtml change work?
HTML snippet
<div ng-class="{ 'hidden': searchDetails }">
<!-- CHOOSE INPUT TYPE -->
<div class="form-group" style="margin-bottom:0px">
<div class="btn-group btn-group-justified">
<div class="btn-group">
<button type="button" class="btn btn-default" ng-click="digits = false; qr = true">Plant Code</button>
</div>
<div class="btn-group">
<button type="button" class="btn btn-default" ng-click="digits = true; qr = false">QR Code</button>
</div>
</div>
</div>
<br />
<!-- QR CODE INPUT -->
<div ng-class="{ 'hidden': qr }">
<img id="blah" src="./images/placeholder.png" />
<span class="btn btn-default btn-file">
<i class="glyphicon glyphicon-camera"></i>
<input type="file" onchange="readURL(this);handleFiles(this.files)">
</span>
<div id="result">xxxxxx</div>
<canvas id="qr-canvas" width="800" height="600"></canvas>
</div>
<!-- MANUAL SELECTION INPUT -->
<div ng-class="{ 'hidden': digits }">
<input ng-model="search.$" style="width:100%; font-size:30px; text-align:center" placeholder="Plant Code" />
<div style="overflow: auto; max-height:250px">
<table class="table table-striped" style="background-color:lightblue">
<tr ng-repeat="plant in plantList | filter:search" ng-click="viewPlant(plant)" style="cursor:pointer">
<th>{{plant.name}}</th>
<th>{{plant.plantcode}}</th>
</tr>
</table>
</div>
</div>
<div>
</div>
</div>
<div ng-class="{ 'hidden': plantDetails }">
// results - this should appear when one of the above is entered.
// works for manual selection, but not qr code
</div>
Just confused on why my QR input will not fire off the change-class options to hide the searchDetails div and show the plantDetails div
EDIT: Doing a small test, it seems that my class variables are indeed not updating at all. I just put the values at the bottom of my page and they do not update when hitting the block of:
$scope.plantDetails = false;
$scope.searchDetails = true;

You need to let Angular know about the change. Add this at the end of your method and let me know if it works.
$scope.$apply();

AngularJS ng-model and ng-checked radio button slider

I'm trying to update an ng-model when a radio button is checked. Although my radio buttons are actually images and my radio buttons are being updated by a function using arrows to cycle through them.
For some reason my $scope.transaction only updates when I actually click the image rather than changing the image using the arrows. Any idea why?
HTML
<div ng-repeat="contact in contacts"
ng-show="showContactID == {{contact.contact_id}}">
<div class="radio text-center">
<label>
<input type="radio"
value="{{contact.contact_id}}"
ng-checked="showContactID == {{contact.contact_id}}"
ng-model="transaction.contact_id">
<img src="public/img/profiles/{{contact.contact_id}}.jpg"
class="img-circle"
height="150">
<h4>{{contact.contact_name}}</h4>
</label>
</div>
</div>
<div class="row text-center">
<div class="col-xs-6">
<a class="btn"
ng-click="changeContact('prev')">
<i class="fa fa-chevron-left fa-2x"></i></a>
</div>
<div class="col-xs-6">
<a class="btn"
ng-click="changeContact('next')">
<i class="fa fa-chevron-right fa-2x"></i></a>
</div>
</div>
CSS
.transaction .form-group.contacts input {
display: none;
}
.transaction .form-group.contacts .radio {
padding-left: 0;
}
JavaScript
$scope.changeContact = function(which){
var currentContactID = $scope.showContactID;
var newContactID = 0;
if(which){
angular.forEach($scope.contacts, function(contact, key){
if(contact.contact_id == currentContactID){
if($scope.contacts[which == 'next' ? key + 1 : key - 1] == undefined){
newContactID = $scope.contacts[which == 'next' ? 0 : $scope.contacts.length - 1].contact_id;
}
else{
newContactID = $scope.contacts[which == 'next' ? key + 1 : key - 1].contact_id;
}
}
});
$scope.showContactID = newContactID;
}
};

Whenever you calls changeContact function , also update transaction.contact_id value with newContactID in same function.