We Keep Coding

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;
}

javascript validate select dropdown

i have a form with javascript validation. there are 3 drop-down(select) fields with questions and 3 input fields with answers.
is there any way to validate the select fields so that they don't have the same question?
here is my code
<script type="text/javascript">
var errmsg;
function validate()
{
var textA= document.getElementById("text1");
var textB= document.getElementById("text2");
var textC = document.getElementById("text3");
var textD = document.getElementById("text4");
var textE = document.getElementById("text5");
var textF = document.getElementById("text6");
var txt1 = document.getElementById("text1").value;
var txt2 = document.getElementById("text2").value;
var txt3 = document.getElementById("text3").value;
var txt4 = document.getElementById("text4").value;
var txt5 = document.getElementById("text5").value;
var txt6 = document.getElementById("text6").value;
var txt1_len = txt1.length;
var txt2_len = txt2.length;
var txt3_len = txt3.length;
var txt4_len = txt4.length;
var txt5_len = txt5.length;
var txt6_len = txt6.length;
if(txt1_len == '')
{
errmsg = "Please select a question";
document.getElementById("ermsg").innerHTML = errmsg;
textA.focus();
return false;
}
else if(txt2_len == 0 || txt2_len > 23 || txt2_len < 3)
{
errmsg = "Invalid Answer";
document.getElementById("ermsg").innerHTML = errmsg;
textB.focus();
return false;
}
else if(txt3_len == '')
{
errmsg = "Please select a question";
document.getElementById("ermsg").innerHTML = errmsg;
textC.focus();
return false;
}
else if(txt4_len == 0 || txt4_len > 23 || txt4_len < 3)
{
errmsg = "Invalid Answer";
document.getElementById("ermsg").innerHTML = errmsg;
textD.focus();
return false;
}
else if(txt5_len == '')
{
errmsg = "Please select a question";
document.getElementById("ermsg").innerHTML = errmsg;
textE.focus();
return false;
}
else if(txt6_len == 0 || txt6_len > 23 || txt6_len < 3)
{
errmsg = "Invalid Answer";
document.getElementById("ermsg").innerHTML = errmsg;
textF.focus();
return false;
}
else
{
return true;
}
return false;
}
</script>
and then the html code
https://jsfiddle.net/johnmathew21/ty999fkv/

you should compare the text inside each ddl ,
i add the following condition :
$('#text1 option:selected').text() === $('#text2 option:selected').text()
working fiddel : here

On change of 1st drop down - disable/remove that particular question from other drop downs.
$('#text1').change(function(){
$('#text2 option[value='+$('#text1').val() +']').attr('disabled',true);
$('#text3 option[value='+$('#text1').val() +']').attr('disabled',true);
});
something like this will work.

javascript form validation radio buttons

I trying to do some validation on a form with radio buttons in it. I can get the text elements to work fine but the radio buttons don't seem to like me.
function validateAll(theForm)
{
var err=0;
var fields;
for (var i=0; i<theForm.elements.length; i++)
{
fields =theForm.elements[i];
if(fields.type == "text" || fields.type == "textarea")
{
if(fields.value == "" || fields.value == null){
err++;
validateText(fields.id);
}
}
else if(fields.type == "radio"){
validateRadio(fields)
}
}
if(err > 0){return;}else{document.myform.submit();}
}
function validateText(id)
{
var x=document.forms["myForm"][id].value;
if (x==null || x=="")
{
var text = id+"Text";
document.getElementById(text).style.visibility ="visible";
return;
}else {
var text = id+"Text";
document.getElementById(text).style.visibility="hidden";
return;
}
}
function validateRadio(radios)
{
var id = radios.id;
var text;
for (i = -1; i < radios.length; ++i)
{
if (radios[i].checked) {
text = id+"Text";
document.getElementById(text).style.visibility="hidden";
return true
}}
text = id+"Text";
alert(text);
document.getElementById(text).style.visibility ="visible";
return false;
}
I am just calling it with a input button. Any ideas on why its not working? It turns the text on find but dose not turn it off.

code after while loop not Working

<script type="text/javascript">
function prepare_values()
{ldelim}
var flag= true;
var i=0;
var total_questions = new Array();
var total_answer = new Array();
while(flag)
{ldelim}
var questions = document.getElementById("question_div_"+i);
if (questions == null)
{ldelim}
flag=false;
alert("Value of flag = "+flag);
{rdelim}
var answer = document.getElementById("answer_div_"+i);
total_questions[i]=questions.firstChild.innerHTML;
if(answer.firstChild.attributes['type'].value == 'text')
{ldelim}
total_answer[i]=answer.firstChild.nodeValue;
{rdelim}
if(answer.firstChild.attributes['type'].value == 'textarea')
{ldelim}
total_answer[i]=answer.firstChild.nodeValue;
{rdelim}
if(answer.firstChild.attributes['type'].value == 'radio_div')
{ldelim}
var radio_button_parent = document.getElementById(answer.firstChild.id);
var oRadio = document.getElementsByName(radio_button_parent.firstChild.name);
for(var k = 0; k < oRadio.length; k++)
{ldelim}
if(oRadio[k].checked)
{ldelim}
var radio_button_value = document.getElementById(oRadio[k].id);
alert("From inside of ever = "+radio_button_value.nextSibling.innerHTML);
total_answer[i]=radio_button_value.nextSibling.innerHTML;
{rdelim}
{rdelim}
{rdelim}
i=i+1;
{rdelim}
alert("hello");
{rdelim}
</script>
The above is my JS code which is running in a SMARTY template file on click of a button. The Code is Working Fine except that It Does not Run the Third Last Line i.e alert("Hello"); any thing after the {redelim} is neglected. What to do ?
here is the code from the firebug:
<script type="text/javascript">
function prepare_values()
{
var flag= true;
var i=0;
var total_questions = new Array();
var total_answer = new Array();
while(flag)
{
var questions = document.getElementById("question_div_"+i);
if (questions == null)
{
flag=false;
alert("Value of flag = "+flag);
}
var answer = document.getElementById("answer_div_"+i);
total_questions[i]=questions.firstChild.innerHTML;
if(answer.firstChild.attributes['type'].value == 'text')
{
total_answer[i]=answer.firstChild.nodeValue;
}
if(answer.firstChild.attributes['type'].value == 'textarea')
{
total_answer[i]=answer.firstChild.nodeValue;
}
if(answer.firstChild.attributes['type'].value == 'radio_div')
{
var radio_button_parent = document.getElementById(answer.firstChild.id);
var oRadio = document.getElementsByName(radio_button_parent.firstChild.name);
for(var k = 0; k < oRadio.length; k++)
{
if(oRadio[k].checked)
{
var radio_button_value = document.getElementById(oRadio[k].id);
alert("From inside of ever = "+radio_button_value.nextSibling.innerHTML);
total_answer[i]=radio_button_value.nextSibling.innerHTML;
}
}
}
i=i+1;
}
alert("hello");
}
</script>

I dont Know what is the issue in the code and why its not working as it is supposed to but this is how I got my code straight.
This is the new working code :
function prepare_values()
{
var flag= true;
var i=0;
var total_questions = new Array();
var total_answer = new Array();
while(flag)
{
var questions = document.getElementById("question_div_"+i);
if (questions == null)
{
break;
}
var answer = document.getElementById("answer_div_"+i);
total_questions[i]=questions.firstChild.innerHTML;
if(answer.firstChild.attributes['type'].value == 'text')
{
total_answer[i]=answer.firstChild.nodeValue;
}
if(answer.firstChild.attributes['type'].value == 'textarea')
{
total_answer[i]=answer.firstChild.nodeValue;
}
if(answer.firstChild.attributes['type'].value == 'radio_div')
{
var radio_button_parent = document.getElementById(answer.firstChild.id);
var oRadio = document.getElementsByName(radio_button_parent.firstChild.name);
for(var k = 0; k < oRadio.length; k++)
{
if(oRadio[k].checked)
{
var radio_button_value = document.getElementById(oRadio[k].id);
alert("From inside of ever = "+radio_button_value.nextSibling.innerHTML);
total_answer[i]=radio_button_value.nextSibling.innerHTML;
}
}
}
i=i+1;
}
alert("hello");
}
All I did is I replaced
if (questions == null)
{
flag=false;
alert("Value of flag = "+flag);
}
with
if (questions == null)
{
break;
}
Though My problem is Solved I still want to know why my previous code was not working because it was still suppose to work as it was correct. If anyone can point out the problem please do so I will appreciate it.

Need help simplyfying validation

I need help with simplifying/making shorter of the following validation code.
Help would be greatly appreciated.
At the moment there's too much text, my teacher said it could be done easier/cleaner...
I'm really stuck.
Thank you.
window.addEventListener('load',init,false);
function init(){
var submit = document.getElementById("submit");
var gender = document.getElementById("gender");
var age = document.getElementById("age");
var length = document.getElementById("length");
var weight = document.getElementById("weight");
var duration = document.getElementById("duration");
var time = document.getElementById("time");
submit.addEventListener('click', validation, false);
gender.addEventListener('checked',validategender,false);
age.addEventListener('blur', validateage, false);
length.addEventListener('blur',validatelength,false);
weight.addEventListener('blur',validateweight,false);
duration.addEventListener('blur',validateduration,false);
time.addEventListener('checked',validatetime,false);
}
function validategender(){
var man = document.getElementById("man");
var vrouw = document.getElementById("vrouw");
var genderfout = document.getElementById("genderFout");
if(man.checked != true && vrouw.checked !=true){
genderfout.innerHTML = "Please choose a gender";
return false;
}else {
genderfout.innerHTML = "";
}return true;
}
function validateage() {
var age = parseInt(document.getElementById("age").value, 10);
var ageFout = document.getElementById("ageFout");
if (isNaN(age) || age < 0 || age > 130) {
ageFout.innerHTML = "Please enter a valid age";
return false;
} else {
ageFout.innerHTML = "";
}
return true;
}
function validateweight() {
var weight = parseInt(document.getElementById("weight").value, 10);
var weightFout = document.getElementById("weightFout");
if (isNaN(weight) || weight < 30 || weight > 200) {
weightFout.innerHTML = "Please enter a valid weight";
return false;
} else {
weightFout.innerHTML = "";
}
return true;
}
function validatelength() {
var length = parseInt(document.getElementById("length").value, 10);
var lengthFout = document.getElementById("lengthFout");
if (isNaN(length) || length < 50 || length > 220) {
lengthFout.innerHTML = "Please enter a valid length";
return false;
} else {
lengthFout.innerHTML = "";
}
return true;
}
function validateduration() {
var duration = parseInt(document.getElementById("duration").value, 10);
var durationFout = document.getElementById("durationFout");
if (isNaN(duration) || duration < 0) {
durationFout.innerHTML = "Please enter a valid time-duration";
return false;
} else {
durationFout.innerHTML = "";
}
return true;
}
function validatetime(){
var minutes = document.getElementById("minutes");
var hours = document.getElementById("hours");
var timeFout = document.getElementById("timeFout");
if(minuten.checked !=true && uur.checked !=true){
timeFout.innerHTML = "choose a time unit!";
return false;
}else {
timeFout.innerHTML = "";
}
return true;
}
function validation(e){
var genderOk = validategender();
var ageOk = validateage();
var weightOk = validateweight();
var lengthOk = validatelength();
var durationOk = validateduration();
var timeOk = validatetime();
if (!genderOk || !ageOk || !weightOk || !lengthOk || !durationOk || !timeOk){
e.preventDefault();
}
}

if JQuery not allowed that leave another option
Regular expression
you can validate but needs a little reading

Use a JQuery validator
http://docs.jquery.com/Plugins/Validation
Your validation code will be reduced to half of what it is now or possibly much less.