I have this HTML form:
<div class="input_fields_wrap">
<div class="form-group row">
<label class="col-sm-3 col-form-label">Items</label>
<div class="col-sm-7">
<input type="text" name="items[]" class="form-control items" id="items">
</div>
<div class="col-sm-2">
<button class="add_field_button btn btn-success btn-sm float-right">Add+</button>
</div>
</div>
</div>
It has Add+ functionality which basically add more field. So If I add more field I have multiple ID of this field like: items, items1, items2, etc..
Now, In my JavaScript validation function, I want to check if this Items field or fields are empty or not.
I can check one field but how can I check multiple fields using JavaScript?
JavaScript validation code for one items field:
var items = document.getElementById("items");
if (items.value == "") {
alert("Item name is reuired");
items.focus();
return false;
}
JavaScript code for Add+ functionality:
var max_fields = 10; //maximum input boxes allowed
var wrapper = $(".input_fields_wrap"); //Fields wrapper
var add_button = $(".add_field_button"); //Add button ID
var x = 1; //initlal text box count
$(add_button).click(function(e){ //on add input button click
e.preventDefault();
if(x < max_fields){ //max input box allowed
x++; //text box increment
var form = '<div class="delete-row"><div class="form-group row"><label class="col-sm-3 col-form-label">Items</label><div class="col-sm-7"><input type="text" name="items[]" class="form-control items"></div><div class="col-sm-2">( X )</div></div></div>';
$(wrapper).append('<div>'+form+'</div>'); //add input box
}
});
$(wrapper).on("click",".remove_field", function(e){ //user click on remove text
e.preventDefault();
$(this).parents('.delete-row').remove(); x--;
})
Full Validation code:
function validateForm () {
var amount = document.forms["salesform"]["amount"];
var buyer = document.forms["salesform"]["buyer"];
var buyerRegex = /^[a-zA-Z0-9_ ]*$/;
var receipt_id = document.forms["salesform"]["receipt_id"];
var receiptIdRegex = /^[a-zA-Z_ ]*$/;
var items = document.querySelectorAll(".items");
var itemsRegex = /^[a-zA-Z_ ]*$/;
var buyer_email = document.forms["salesform"]["buyer_email"];
var note = document.forms["salesform"]["note"];
var city = document.forms["salesform"]["city"];
var phone = document.forms["salesform"]["phone"];
var entry_by = document.forms["salesform"]["entry_by"];
if (amount.value == "") {
alert("Please enter the amount.");
amount.focus();
return false;
} else if (isNaN(amount.value)) {
alert("Amount should be only numeric value.");
amount.focus();
return false;
}
if (buyer.value == "") {
alert("Buyer name is required");
buyer.focus();
return false;
} else if (!buyerRegex.test(buyer.value)) {
alert("Buyer name only contain letter, number and space.");
buyer.focus();
return false;
} else if (buyer.value.length > 20 ) {
alert("Buyer name must be less than 20 characters long.");
buyer.focus();
return false;
}
if (receipt_id.value == "") {
alert("Receipt Id is reuired");
receipt_id.focus();
return false;
} else if (!receiptIdRegex.test(receipt_id.value)) {
alert("Receipt Id must contain only characters.");
receipt_id.focus();
return false;
}
items.forEach(ele => {
if (ele.value == "") {
alert("Item name is required");
ele.focus();// focuses on that particular input
return false;
}
})
return true;
}
You can try something like this,Query SelectorAll,As forEach returns undefined ,you can try with every
const items = [...document.querySelectorAll("input[type=text]")];
items.every(ele => {
//console.log(ele.value)
if (ele.value == "") {
alert("Item name is reuired");
ele.focus();// focuses on that particular input
return false;
}
})
<div class="input_fields_wrap">
<div class="form-group row">
<label class="col-sm-3 col-form-label">Items</label>
<div class="col-sm-7">
<input type="text" name="items[]" class="form-control" id="items">
</div>
<div class="col-sm-2">
<button class="add_field_button btn btn-success btn-sm float-right">Add+</button>
</div>
</div>
</div>
Here's a version of Shubh's answer but querying by class. It's very important to note that you cannot short circuit forEach in javascript by returning from the function, so I altered this solution to use a for loop. For more information you can read this SO question about it.
let items = document.querySelectorAll(".items")
for (let i = 0; i < items.length; i++) {
if (items[i].value == "") {
alert("Item name is required");
items[i].focus(); // focuses on that particular input
return false;
}
})
<div class="input_fields_wrap">
<div class="form-group row">
<label class="col-sm-3 col-form-label">Items</label>
<div class="col-sm-7">
<input class="items" type="text" name="items[]" class="form-control">
</div>
<div class="col-sm-2">
<button class="add_field_button btn btn-success btn-sm float-right">Add+</button>
</div>
</div>
</div>
I would change the input field to have a class that's called item
Then I would loop all those items.
var items = document.querySelectorAll('.item');
for (var i = 0; i < items.length; i++) {
var item = items[i];
// validate
}
The functionality to increment the id is quite useless in your case. getElementById will give you the first match. In your case, where you want to check several elements it'll be wise to use QuerySelectorAll:
document.querySelectorAll('.form-control').forEach(node => {
if(items.value == "") {
...
}
})
Related
when i add new input box with javascript function, previous input boxes become empty. here is the code:
<div id="field">
<input type="text">
</div>
<div id="error"></div>
<button onclick="Add()">add</button>
<script>
let i=0;
const Add=()=>{
i++
if(i<5)
document.getElementById('field').innerHTML+=`<input type="text" id="value${i}">`
else
document.getElementById('error').innerHTML='Error: Field cant be more then 5'
}
</script>
what can I do to NOT change input values of input box on adding new input box with above codes.
You are overwriting the entire HTML content of ID field,
let i = 0;
const Add = () => {
i++
if (i < 5) {
const input = document.createElement('input');
document.getElementById('field').appendChild(input);
} else
document.getElementById('error').innerHTML = 'Error: Field cant be more then 5'
}
<div id="field">
<input type="text">
</div>
<div id="error"></div>
<button onclick="Add()">add</button>
One way of doing it, keeping in mind separation of concerns and avoiding the creation of unnecessary global variables could be:
#error {
display: none;
}
<div id="field">
<input type="text">
</div>
<div id="error"></div>
<button onclick="Add()">add</button>
<script>
const Add = () => {
const inputContainer = document.querySelector('#field'); // this variable is not strictly necessary but I think it makes the code more readable
const inputNotification = document.querySelector('#error'); // this variable is not strictly necessary but I think it makes the code more readable
const inputCount = inputContainer.querySelectorAll('input[type=text]').length // count how many input elements of type text are already inside the `field` div
if (inputCount < 5) {
const txtInput = document.createElement('input');
txtInput.setAttribute('type', 'text');
txtInput.setAttribute('id', `value${inputCount}`);
inputContainer.append(txtInput);
} else {
inputNotification.innerText = 'Error: Field can\'t be more than 5';
inputNotification.style.display = 'block'
event.target.setAttribute('disabled', true); // optionally, you can disable the add button if you reached the maximum number of input fields
}
}
</script>
You could use Document.createElement() and element.appendChild() so that you do not alter the HTML of the div#field :
<div id="field">
<input type="text">
</div>
<div id="error"></div>
<button onclick="Add()">add</button>
<script>
let i=0;
const Add=()=>{
i++
if(i<5) {
let input = document.createElement("input");
input.type = "text";
input.id = "value" + i;
let button = document.createElement("button");
button.innerText = "delete";
button.onclick = function(){
input.remove(); //remove text input
this.remove(); //remove this delete button
i--; //decrement i
};
document.getElementById('field').appendChild(input);
document.getElementById('field').appendChild(button);
} else {
document.getElementById('error').innerHTML='Error: Field cant be more then 5';
}
}
</script>
I asked a question earlier with answers which didn't help, I still haven't been able to figure out where my issue is. Originally I thought it was because I had two IDs named the same but this was not the issue.. The form submits and there are no errors but it does not update the values in localStorage?
Edit: After changing const idx to const i the value at position [2] (or final value) would update for every booking (regardless of index). I thought of maybe changing the i value to below but it gives error i is defined before it is initialised?
bookings.findIndex(booking => bookings[i].fname == fname && bookings[i].lname == lname);
Here's what I have (updated code):
// ~~~ add bookings to localStorage
var bookings = JSON.parse(localStorage.getItem("bookings")) || [];
window.onload = showBooking();
$("#submit").click(function() {
var newBookings = {
fname: $('#fname').val(),
lname: $('#lname').val()
}
bookings.push(newBookings);
var json = JSON.stringify(bookings);
window.localStorage.setItem("bookings", json);
showBooking();
});
// ~~~ edit bookings in localStorage
$(document).on('click','#edit',function (e) {
e.preventDefault();
var parent_form = $(this.form);
var fname = parent_form.find('.input:eq(0)').val();
var lname = parent_form.find('.input:eq(1)').val();
const i = bookings.findIndex(booking => bookings.fname == fname && bookings.lname == lname);
deleteBooking(i);
bookings.push({
fname,
lname
});
var json = JSON.stringify(bookings);
window.localStorage.setItem("bookings", json);
// showBooking();
});
// ~~~ display bookings in browser
function showBooking() {
var bookingResult = document.getElementById("result");
var ul = document.createElement("ul");
// var bookingItems = JSON.parse(localStorage.getItem("bookings")) || [];
bookingResult.innerHTML = "";
for (let i = 0; i < bookings.length; i++) {
bookingResult.innerHTML += `<div class="card card-body bg-light m-4">
<h3>${bookings[i].fname + " " + bookings[i].lname}
<button onclick="deleteBooking(${i})" class="btn btn-danger text-light ">Delete</button>
<button onclick="editBooking(${i})" class="btn btn-danger text-light ">Edit</button>
</h3>
</div>`;
}
}
// ~~~ edit bookings in browser
function editBooking(i) {
// $('#regForm').hide();
$('#result').hide();
var currentItem = document.getElementById("currentItem");
var editBooking = document.getElementById("editAppt");
currentItem.innerHTML += `<div class="card card-body bg-light m-4">
<h3>${bookings[i].fname + " " + bookings[i].lname} </h3>
</div>`;
editBooking.innerHTML = `<input type="text" class="input" id="fname_${i}" placeholder="${bookings[i].fname}" name="${bookings[i].fname}" value="${bookings[i].fname}" required>
<input type="text" class="input" id="lname_${i}" placeholder="${bookings[i].lname}" name="${bookings[i].lname}" value="${bookings[i].lname}" required>
<input id="edit" type="submit" value="Edit">`;
}
// ~~~ delete bookings from localStorage
function deleteBooking(i) {
bookings.splice(i, 1);
localStorage.setItem("bookings", JSON.stringify(bookings));
showBooking();
}
My HTML form:
<form id="regForm" name="regForm" action="" class="col-sm-6">
<div class="row">
<input type="text" class="input" id="fname" placeholder="First Name" name="fname" required>
<input type="text" class="input" id="lname"placeholder="Last Name" name="lname" required>
<input id="submit" type="submit" value="Submit">
</div>
</form>
<div id="result" class="row"></div>
<div id="currentItem" class="row"></div>
<div id="editAppt" class="row"></div>
There are several changes you need to consider
You have bookings AND bookingItems
You do some changes (I assume there will be some destination change) but do not save them
You parse the localStorage far too often. Not needed. Only read once and write when modified
You cannot have duplicate IDs so you need to delegate and use class names
Be consistent and use jQuery to create elements and to add events- for example the delete button should be d er legates and remove its closest form element
Here is how to find the booking based on names
const idx = bookings.findIndex(booking => bookings.fname == fname && bookings.lname == lname);
I have this code I use for showing a warning message:
<div class="row clearfix">
<div class="col-sm-8 col-sm-offset-2">
<div>
<div class="form-line focus">
<span class="category-status" style="color: red;">
This entered category is not found in the category list.<br>
Press button on the right to save this new category.
</span>
</div>
</div>
</div>
</div>
Then, I have another code use for typeahead dropdown:
<div class="row clearfix">
<div class="col-sm-7 col-sm-offset-2">
<div class="form-group form-float">
<div class="form-line focus">
<input type="hidden" id="cat-id" name="category_id" value="">
<input type="text" id="select-or-enter-category" name="category" data-provide="typeahead"
placeholder="Enter/Select a category" value="" required="required" class="form-control">
</div>
</div>
</div>
<div class="col-sm-1">
<button type="button" id="save-category" data-toggle="tooltip" data-placement="top" title=""
class="btn btn-warning" data-original-title="Save this input as New Category">
<i aria-hidden="true" class="fa fa-bookmark-o" style="display: inline;"></i>
</button>
</div>
</div>
And this is my javascript/jquery code:
When the user types keyword in an input box #select-or-enter-category,
this javascript code will give a dropdown as typeahead for the given keyword.
/**
* Autocomplete for category - ADD TASK MODAL
* #return {[type]} [description]
*/
$(document).ready(function(){
axios_get('/axiosCategory', function(data) {
var cat = [];
var $input = $("#select-or-enter-category");
let temp;
data.forEach(function(item) {
temp = {
id: item.id,
name: item.categoryName
}
cat.push(temp);
});
$input.typeahead({
source: cat,
autoSelect: true
});
$input.change(function() {
// console.log($input);
var current = $input.typeahead("getActive");
if (current) {
$('#cat-id').val(current.id);
}
});
});
});
When the cursor leaves the input box #select-or-enter-category, this code checks whether the given input exists in the dropdown or not. If not, the warning message will show up that will ask the user to save the input as a new category.
/**
* Display the message asking the user to save the
* new category
*
* #return void
*/
$('#select-or-enter-category').focusout(function() {
let val = $(this).val();
axios_get('/axiosCategory', function(data) {
let search = false;
data.forEach(function(item) {
if (val == item.categoryName) {
search = true;
}
});
if (search == false) {
$('.category-status').removeAttr('hidden');
} else {
$('.category-status').attr('hidden', true);
}
});
});
Then problem is that when the user clicks an item from the dropdown using the mouse, the error message shows up which is not what I want to happen.
I want the error message to show up only when the cursor actually leaves the input box #select-or-enter-category.
But if the user only uses keyboard for choosing an item from the dropdown and enter it, there is no problem.
Do you have any suggestions?
Try this one
$(document).ready(function(){
axios_get('/axiosCategory', function(data) {
dataGlobal = data;
var cat = [];
var $input = $("#select-or-enter-category");
let temp;
data.forEach(function(item) {
temp = {
id: item.id,
name: item.categoryName
}
cat.push(temp);
});
$input.typeahead({
source: cat,
autoSelect: true
});
$input.change(function() {
var current = $input.typeahead("getActive");
if (current) {
$('#cat-id').val(current.id);
}
});
$input.focusout(function() {
let val = $('#select-or-enter-category').val();
let current = $input.typeahead("getActive");
let search = false;
let str = current.name.substring(0,val.length);
if (str == val) {
val = current.name;
}
dataGlobal.forEach(function(item) {
if (val == item.categoryName) {
search = true;
}
});
if (search == false) {
$('#category-status').removeAttr('hidden');
} else {
$('#category-status').attr('hidden', 'hidden');
}
});
});
});
I have 3 sections of input fields separated with different heading(Laser Pass, The Giggsy, The set up) generated from a JSON array. Here is what it looks like:
I want to compare two fields Score and Attempts and show an error message if the value of Score is larger then Attempts. Something like this:
But some section like, The Giggsy have a different type of input fields and no need to compare/check those fields. Only where it has SCORE and ATTEMPTS should compare.
When the section is filled up Show success message like this:
What I can do to make those things in angular way. Here is what I've done so far: PLUNKER
HTML:
<div class="row" ng-repeat="all in options">
<h4> {{ all.name}} </h4>
<div class="col-sm-5ths" ng-repeat="measurement in all.measurements">
<div class="form-group no-margin form-oneline">
<label style="width: 100%">{{ measurement.name }}</label>
<input ng-model="measurement.value" type="{{ measurement.type }}" min="{{ measurement.min }}" max="{{ measurement.max }}" class="form-control display-inline" required>
<label style="width: 100%">{{ measurement.scale }}</label>
</div>
</div>
<span style="color:red;" ng-show="testDataFieldWarning(options.measurements)">
Score can't be larger then Attempts
</span>
<span style="color:Green;" >
Done!!
</span>
</div>
<button type="submit" style="margin-top:50px;" ng-disable="">Submit</button>
JS
$scope.testDataFieldWarning = function (measurements) {
var score = 0 , attempts = 0;
angular.forEach(measurements, function(measurement) {
if((measurement.name) == 'Score'){
score = measurement.value;
}
if((measurement.name) == 'Attempts'){
attempts = measurement.value;
}
});
return attempts < score;
}
$scope.testDataFieldValidate = function (measurement) {
var isInvalid = false;
angular.forEach(measurement, function(v) {
if(typeof (v.value) == 'undefined'){
isInvalid = true;
}
});
return (isInvalid);
}
Sorry for bad English and explanation.
I forked your plunker and added some additional validating functions...
function isScoreField(measurements) {
if (measurements[1].name === 'Score' && measurements[2].name ==='Attempts') {
return true;
} else {
return false;
}
}
$scope.testDataFieldInvalid = function (measurements) {
if (isScoreField(measurements) && parseInt(measurements[2].value) < parseInt(measurements[1].value)) {
return true;
} else {
return false;
}
};
$scope.testDataFieldsEntered = function (measurements) {
if (measurements[1].value && measurements[2].value) {
return true;
} else {
return false;
}
};
... that will conditionally show/hide the done/error messages.
<span style="color:red;" ng-show="testDataFieldInvalid(all.measurements)">
Score can't be larger than Attempts
</span>
<span style="color:Green;" ng-show="testDataFieldsEntered(all.measurements) && !testDataFieldInvalid(all.measurements)">
Done!!
</span>
Hope this helps!
I found this fiddle and I am trying to get it to work...I can not figure out why the names are not being added to the list, for some reason Add button is acting like a submit button and I can not tell why...It should add all the numbers to a list so when I click submit, then it should send the numbers in an array..
JavaScript:
function bindName() {
var inputNames = document.getElementById("names").getElementsByTagName("inputNames");
for (i = 0; i < inputNames.length; i++) {
inputNames[i].onkeydown = function() {
if (this.value == "") {
setTimeout(deletename(this), 1000);
}
}
}
}
document.getElementById("addName").onclick = function() {
var num1 = document.getElementById("name");
var myRegEx = /^[0-9]{10}$/;
var myRegEx = /^[0-9]{10}$/;
var itemsToTest = num1.value;
if (myRegEx.test(itemsToTest)) {
var form1 = document.getElementById("names");
var nameOfnames = form1.getElementsByTagName("inputNames").length;
var newGuy1 = document.createElement("inputNames");
newGuy1.setAttribute("id", nameOfnames);
newGuy1.setAttribute("type", "text");
newGuy1.setAttribute("value", num1.value);
form1.appendChild(newGuy1);
num1.value = "";
bindName();
}
else {
alert('error');
}
};
HTML:
<h1>Enter Name</h1>
<div id="mainName">
<h2>name</h2>
<label for="name">Add Names: </label>
<input id="name" type="text">
<button id="addName">Add</button>
<form>
<div id="names">
</div>
<input METHOD="POST" action="text.php" type="submit" value="Submit">
</form>
</div>
I've seen
document.createElement("inputNames");
Shouldn't be
document.createElement("input");
?
Because this /^[0-9]{10}$/; will accept only 10 numbers and only that, try entering 1234567890 and you will see no error.
I'm not sure why your "name" field is restricted to 10 digit numbers, but I've got the thing to work.
http://jsfiddle.net/y8Uju/4/
I think the problem was that you were trying to create an element with the tag name inputNames, but that's not a valid tag. Instead I changed it to create inputs, and set the class to inputNames.