We Keep Coding

Can not validate properly the radio button using JavaScript/jQuery

I cannot check the radio button select in my validation using JavaScript/jQuery. I am generating some multiple textarea, radio button and drop down list dynamically. My requirement is I will fill all field and check the validation. But it's not happening properly.
Here is my code:
function validate(){
var x =document.getElementById('ques').value;
console.log('value',x);
for(var i=0;i<x;i++){
var tid="questions"+ i;
var rid='answer_type'+i;
var sid="nscale"+i;
var scaleid='#scaleid'+i;
if(document.getElementById("questions"+ i)){
if(document.getElementById(tid).value==''){
alert('Please enter the question');
return false;
}else if($('input[id=answer_type' + i + ']').is(':checked')==false){
alert('Please check the answer type');
return false;
}else if($(scaleid).css('display') == 'block'){
if(document.getElementById(sid).value==''){
alert('Please select the scale');
return false;
}
}else{
}
}
}
}
My complete code is here plunkr. My problem is when user has selected all radio button and also click on validate button still its displaying the alert message as Please check the answer type. My requirement is I will check all field and drop down list whether these are blank or not in validation case.

Try and make the id of radio button in the addQuestionField() function as id="answer_type'+i+'" instead of id="answer_type0".

jQuery form fields validation

i have a form with few input fields with class "inputfields" need to validate each field if empty alert 'fieldname is empty' otherwise return true my jquery code is not working keep getting errors at the console log can any one help please ?
jQuery(document).ready(function() {
$('.inputfields').each.on('change keyup' ,function(){
var ope = $(this).attr('name');
if (ope.val()==''){
alert(ope+'is empty');
}else {
console.log(ope);
}
});
});

I believe you want to check different types of input fields, hence want to use change and keyup.
I tried something based on your code, but this following solution will only work, if you want to validate text type input fields. For select or other input types you have to put some more checks inside the loop or have to some other way to validate.
$('.inputfields').each(function() {
$(this).bind('change keyup', function() {
var ope = $(this).attr('name');
if ($(this).val() == '') {
console.log(ope+'is empty');
} else {
console.log(ope+ ' : ' + $(this).val());
}
});
});
Hope this will lead you to find your desired solution.

JQuery MultiPage form.. validation on each step

I have a form which is split up into sections using pagination on each tag. (See Fiddle)
I however have required fields in each section, I'd like to validate it so that fields with the "required" attribute must not be blank before the user moves on to the next section.
http://jsfiddle.net/Azxjt/
I've tried to following but don't think I'm on the right tracks:
$(this).closest("article > :input").each(function() {
if($(this).val == null) {
con = 0;
}
});
if ( con == 0 ) {
alert("All fields must be filled in");
}
else {
}
Your help is appreciated :)

Text input will return a black value if no response has been entered. Try the following
In jQuery, the value is returned by val()
$(this).val() == ""
You could possibly enhance your jQuery selector to test only those input elements with a corresponding required label.

Use each function.
var isEmpty;
$("input").each(function() {
var element = $(this);
if (element.val() == "") {
isEmpty= true;
}
});

Highlight empty select box after alert

I have a site using input:text, select and select multiple elements that generate a text output on button click.
Having searched SO, I found examples of validation code that will alert the user when a select field returns an empty value-
// alert if a select box selection is not made
var selectEls = document.querySelectorAll('select'),
numSelects = selectEls.length;
for(var x=0;x<numSelects;x++) {
if (selectEls[x].value === '') {
alert('One or more required fields does not have a choice selected... please check your form');
return false;
$(this).addClass("highlight");
}
At the end, I tried to add a condition after the alert is dismissed, such that the offending select box will be highlighted by adding the 'highlight' class - but this doesn't do anything. My .highlight css is {border: 1px red solid;}
Any help here?
UPDATED WITH ANSWER - Thanks #Adam Rackis
This code works perfectly. I added a line to remove any added '.highlight' class for selects that did not cause an error after fixing
// alert if a select box selection is not made
var selectEls = document.querySelectorAll('select'),
numSelects = selectEls.length;
$('select').removeClass("highlight");//added this to clear formatting when fixed after alert
var anyInvalid = false;
for(var x=0;x<numSelects;x++) {
if (selectEls[x].value === '') {
$(selectEls[x]).addClass("highlight");
anyInvalid = true;
}}
if (anyInvalid) {
alert('One or more required fields does not have a choice selected... please check your form');
return false;
}

You were close. In your loop, this does not refer to each select that you're checking.
Also, you're returning false prior to the highlight class being added. You'll probably want to keep track of whether any select's are invalid, and return false at the very end after you're done with all validation.
Finally, consider moving your alert to the very bottom, so your user won't see multiple alerts.
var anyInvalid = false;
for(var x=0;x<numSelects;x++) {
if (selectEls[x].value === '') {
$(selectEls[x]).addClass("highlight");
anyInvalid = true;
}
}
if (anyInvalid) {
alert('One or more required fields does not have a choice selected... please check your form');
return false;
}
Also, since you're already using jQuery, why not take advantage of its features a bit more:
$('select').each(function(i, sel){
if (sel.value === '') {
$(el).addClass("highlight");
anyInvalid = true;
}
});
if (anyInvalid) {
alert('One or more required fields does not have a choice selected... please check your form');
return false;
}

Call a recursive function with different variables

I am new to javascript. I am doing a feedback form where there are 12 radio buttons that need to get validated individually and a textarea will be displayed when I click a particular value.
Here, when I click that button, my textarea, which is in display, should be mandatory entered (eg: when I click fail option in a results question, then I should mention in which subject he failed through that textarea. something like that).
For this, I have written code, it's working fine with the 1st radio button, but unable to call this recursively for remaining buttons.
I need to call this code in a function recursively, but my variables need to get change everytime. Like for 2nd time, I should use option2,text2, likewise in next call option3,text3, etc.
var option = $("#form1 input[#name=radio1]:checked").val();
var text = document.getElementById("text1").value;
if (!$("#form1 input[#name=radio1]:checked").val()) {
alert("Please fill all the fields");
return false;
errs++;
} else if (option == "3" && trim(text) == "") {
alert("Please enter comments.");
return false;
}
This piece of code needs to be called for var option1 to option10 and same text1 to text10. Like:
var option2 = $("#form1 input[#name=radio2]:checked").val();
var text2 = document.getElementById("text2").value;
This should get called immediately of completion of first radio button.
Please help me out.

"Recursive" is the wrong word here. You just want to loop over all the elements.
Get all the radios, and loop over them. Then get the ID, and all the fields associated with that id.
I'm assuming you're using jQuery, so here's an example:
// Note: The "#" is not needed in jQuery
var radios = $("#form1 input[name^='radio']"); // "^=" means "starts with"
radios.each(function(){
var id = this.name.replace('radio', ''); // this will get the number, eg: 1
var option = $(this).val(); // get radio's value
var text = $('#text'+id).val(); // get textX's value
if(!$(this).is(':checked')){ // check if radio is checked
alert("Please fill all the fields");
errs++; // make sure to do this before "return false"
return false; // break the .each loop
}
else if (option == "3" && trim(text) == "") {
alert("Please enter comments.");
return false;
}
});