We Keep Coding

How to check javascript nodelist if it's contents are either all empty or all have values?

I'm fairly new to javascript and looking at checking some fields with dynamic ID's at the end of the ID to see if they've either had values entered in all of them or none of them at all. The user shouldn't be allowed to only enter values in some of them and leave others blank.
I've wrote the below, which works, but I feel there must be a better way of doing this?:
var x = document.querySelectorAll('[id^="entryField"]');
for (var i = 0; i < x.length; ++i) {
if (x[i].value == "") {
for (var i = 0; i < x.length; ++i) {
if (x[i].value != "") {
alert("Please enter a value");
}
}
}
}

One loop should work with a counter for empty (or filled) fields. If the counter is not zero and does not have the length of the object, then some fields have a value.
var x = document.querySelectorAll('[id^="entryField"]'),
empty = 0;
for (var i = 0; i < x.length; ++i) {
if (x[i].value == "") {
++empty;
}
}
if (empty !== 0 && empty !== x.length) {
alert("Please enter a value");
}

This will be a simpler version:
var x = document.querySelectorAll('[id^="entryField"]');
const inputs = Array.from(x);
const allInput = inputs.every(input => {
return (input.value != "");
});
const allEmpty = inputs.every(input => {
return (input.value == "");
});
if (allInput || allEmpty) {
alert('xxxxxx');
}
ES5 implementation:
var x = document.querySelectorAll('[id^="entryField"]');
var inputs = Array.from(x);
var allInput = inputs.every(function(input) {
return (input.value != "");
});
var allEmpty = inputs.every(function(input) {
return (input.value == "");
});
if (allInput || allEmpty) {
alert('xxxxxx');
}
EDIT: Support allInput or allEmpty. Overlooked at the beginning.

You can check with two every calls, below will be true if all elements are filled or none of the elements are filled - every other case will be false:
var x = document.querySelectorAll('[id^="entryField"]');
var allowed = function allOrNone(elements) {
return Array.prototype.every.call(x, function(v) {
return v.value && v.value != "";
}) || Array.prototype.every.call(x, function(v) {
return !v.value || v.value == "";
});
}
console.log(allowed(x));
<input id="entryFieldFoo">
<input id="entryFieldBar">

JavaScript validation using inputs as array

Hi I am trying to validate my inputs using JavaScript, I have the inputs in an array and I am trying to use them to extract information like .value and set values such as .className. This is not working as I would like it to. What I want the code to do is if I define input[1] = document.forms["register"]["username"]; then use input[1].value it interprets this as if I have written document.forms["register"]["username"].value
Here is my original code:
function validateForm() {
var inputs = [];
inputs[0] = document.forms["register"]["firstname"];
inputs[1] = document.forms["register"]["lastname"];
inputs[2] = document.forms["register"]["username"];
inputs[3] = document.forms["register"]["email"];
inputs[4] = document.forms["register"]["password"];
inputs[5] = document.forms["register"]["confirmpassword"];
for (i = 0; i < inputs.length; i++) {
if (inputs[i].value == null || inputs[i].value == "") {
alert("Highlighted fields must be filled out");
inputs[i].className += " invalid";
return false;
}
}
return true;
}
Here is my updated code, I am unsure of whether this is good practice:
function validateForm() {
var error = false;
var inputs = [];
inputs[0] = document.forms["register"]["firstname"];
inputs[1] = document.forms["register"]["lastname"];
inputs[2] = document.forms["register"]["username"];
inputs[3] = document.forms["register"]["email"];
inputs[4] = document.forms["register"]["password"];
inputs[5] = document.forms["register"]["confirmpassword"];
console.log(inputs.length);
for (i = 0; i < (inputs.length); i++) {
if (inputs[i].value == null || inputs[i].value == "") {
error = true;
inputs[i].className += " invalid";
if (inputs[i] == (inputs.length - 1)) {
alert("Highlighted fields must be filled out");
return false;
}
}
}
if (error == false) {
return true;
}
alert("Highlighted fields must be filled out");
return false;
}
The class invalid adds a red border to the field.
Thanks.

i changed your function a bit to read input elements as in the plnkr link below
https://plnkr.co/edit/zHhM6lmz3XA2u4CYr9h0?p=preview
function validate() {
var inputs = [];
var elements = document.forms["register"].elements;
for (var i = 0; i < elements.length; i++) {
var element = elements[i];
if (element.type === "text" || element.type === "email" || element.type === "password") {
inputs.push(element)
}
}
for (i = 0; i < inputs.length; i++) {
if (inputs[i].value == null || inputs[i].value == "") {
alert("Highlighted fields must be filled out");
inputs[i].className += " invalid";
return false;
}
}
return true;
}
I have handled three input types
text
email
password
You can add more later if needed
Edit: Possible cause of error can be DOM element not available inside the form (please share HTML if possible). First loop will read all available DOM element from the form.

function validateForm() {
var inputs = [];
inputs[0] = document.forms["register"]["firstname"];
inputs[1] = document.forms["register"]["lastname"];
inputs[2] = document.forms["register"]["username"];
inputs[3] = document.forms["register"]["email"];
inputs[4] = document.forms["register"]["password"];
inputs[5] = document.forms["register"]["confirmpassword"];
for (i = 0; i < inputs.length; i++) {
if (inputs[i].value == null || inputs[i].value == "") {
alert("Highlighted fields must be filled out");
inputs[i].className += " invalid";
return false;
}
}
return true;
}

How do you increment the value of a variable based on a substring in Javascript?

I'm trying to create a script where I validate a phone number without too much regex in my scripts. So far I have:
var phone = document.PizzaForm.phone.value;
var num = [1,2,3,4,5,6,7,8,9,0];
var delim = ["(" , ")" , "-" , "."];
var incr = 0;
var status = 0;
if (document.PizzaForm.phone.value.substring() = num) {
incr++;
return;
}
if (incr < 10) {
var statustext=1;
alert("Phone data is missing.");
}
if (document.PizzaForm.phone.value.substring[0,4,8] != num || document.PizzaForm.phone.value.substring[0,4,8] != delim) {
(status var statustext=1;
alert("Phone data is incorrect.");)
}
if (statustext == 0) {
return true;
}
else {
return false;
}
}
but it's not working. I'm trying to increment my incr everytime there is a number so if incr < 10, i get a message that there aren't enough numbers. Anyone see where I might be going wrong?

In your below if condition :
if (document.PizzaForm.phone.value.substring[0,4,8] != num || document.PizzaForm.phone.value.substring[0,4,8] != delim) {
(status var statustext=1;
alert("Phone data is incorrect.");)
}
Declare your statustext set globally. Not inside the if condition.
status set to 1 directly.
change your logic as below
var statustext = 0;
if (document.PizzaForm.phone.value.substring[0,4,8] != num || document.PizzaForm.phone.value.substring[0,4,8] != delim) {
status = 1;
statustext = 1;
alert("Phone data is incorrect.");)
}

regex for inside javascript function

Here is the function
function getChecked(button, form)
{
var name;
for (i = 0; i < document.forms['CheckForm'].list.length; i++) {
name = "Check" + (i + 0);
if (document.forms['CheckForm'].list[i].checked == true) {
if (name == "Check0")
form.Check0.value = "2337667";
else if (name == "Check1")
form.Check1.value = "2335765";
else if (name == "Check2")
form.Check2.value = "2332651";
else if (name == "Check3")
form.Check3.value = "2328582";
}
How to write a regex to get the value for the values after form.check0.value by itself and if possible the values for form.check0.value and form.check1.value and etc.

You may be looking for something like this regex:
/\d{2,}/g
Example:
var s = 'function getChecked(button, form){\n var name;\n for (i = 0; i < document.forms["CheckForm"].list.length; i++) {\n name = "Check" + (i + 0);\n if (document.forms["CheckForm"].list[i].checked == true) {\n if (name == "Check0")\n form.Check0.value = "2337667";\n else if (name == "Check1")\n form.Check1.value = "2335765";\n else if (name == "Check2")\n form.Check2.value = "2332651";\n else if (name == "Check3")\n form.Check3.value = "2328582";\n }\n }\n}';
console.log(s.match(/\d{2,}/g));
Output:
["2337667", "2335765", "2332651", "2328582"];
As for that PHP sample provided by #Daverandom, that can be shortened significantly:
preg_match_all('/\d{2,}/', $str, $matches); // Get all numbers that are at least 2 characters long.
print_r($matches[0]);
As seen in this paste

Form Validation - How to use If and Else If

I am trying to do a Javascript form validation, and I want to set the formValue to 0 in several cases. That is, if ANY of the required fields are not filled out, the value should go to 0.
function formValidation() {
var formValue = 1;
if (document.getElementById('orgname').value == '') formValue = 0;
else if (document.getElementById('culture[]').value == '') formValue = 0;
else if (document.getElementById('category[]').value == '') formValue = 0;
else if (document.getElementById('service[]').value == '') formValue = 0;
if (formOkay == 1) {
return true;
} else if (formOkay == 0) {
alert('Please fill out all required fields');
return false;
}
}
Is there a more elegant way to do this?
EDIT: Script does not appear to be working, now.

You can do some looping:
var toCheck = ['orgname', 'culture[]', 'category[]', 'category[]']
for(var id in toCheck )
{
if(document.getElementById(id).value == ''){
formValue = 0;
break;
}
}
A more elegant way can be that you specify a 'required' class on each input that you want to check and than do the following using jQuery:
$(document).ready(function(){
var toCheck = $('.required');
var formValue = 1;
$.each(toCheck, function(index, element){
if(element.val() == '')
formValue = 0;
});
});

I've done this in other languages using boolean logic, taking advantage of the & operator. It always returns false if any of the values are false.
Something like:
function formValidation() {
var formValue = true;
formValue &= document.getElementById('orgname').value != '';
formValue &= document.getElementById('culture[]').value != '';
formValue &= document.getElementById('category[]').value != '';
formValue &= document.getElementById('service[]').value != '';
if(!formValue) {
alert('Please fill out all required fields');
}
return formValue;
}
This has the advantage of working for other scenarios where your logic is more complicated. Anything that evaluates in the end to true/false will fit right in with this solution.
Then I'd work on reducing logic duplication:
function formValidation() {
var formValue = true;
var elementIdsToCheck = ['orgname', 'culture[]', 'category[]', 'category[]'];
for(var elementId in elementIdsToCheck) {
formValue &= document.getElementById(elementId).value != '';
}
if(!formValue) {
alert('Please fill out all required fields');
}
return formValue;
}

Something like this should help (this assumes that value attribute is available on the referenced elements):
var ids = ["orgname", "culture[]", "category[]", "service[]"],
formValue = 1; // default to validation passing
for (var i = 0, len = ids.length; i < len; i++) {
if (document.getElementById(ids[i]).value === "") {
formValue = 0;
break; // At least one value is not specified so we don't need to continue loop
}
}

Building upon #Baszz's second answer using jQuery, you could also build a more generic solution using HTML5 data- attributes:
$(function() {
$('form').submit(function() {
var toValidate = $(this).find('input[data-validation]');
for(var i=0; i<toValidate.length; i++) {
var field = $(toValidate[i]);
if(field.val().search(new RegExp(field.data('validation'))) < 0) {
alert("Please fill out all required fields!");
return false;
}
}
});
});
You can then specify regular expressions in your markup:
<form>
<input type="text" data-validation=".+" />
</form>
For required fields you can use ".+" as a regular expression, meaning the user has to enter at least one character, but you can of course use the full potential of regular expressions to check for valid email addresses, phone numbers or zip codes etc...