Can not validate properly the radio button using JavaScript/jQuery - javascript

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".

Related

How to hide the next button on qualtrics until a text field is filled in with text?

I have a survey with two questions on the page (one that is multiple choice) and one that is a text entry question.
I want to hide the next button until the text entry question has been filled out but I've only been able to hide the next button indefinitely and it seems to not reappear after the text field has been filled in.
Qualtrics.SurveyEngine.addOnload(function()
{
this.hideNextButton();
(function() {
$('form > input').keyup(function() {
var empty = false;
$('form > input').each(function() {
if ($(this).val() == '') {
empty = true;
}
});
if (empty) {hideNextButton ()} else {showNextButton ()}
});
});
});
You have some syntax errors. It looks like you are trying to use jQuery instead of Prototypejs. Besides that, you need to restrict your input element search to the question and there is only one input field so you only need one function. Try this (edited to defer initial next button hide):
Qualtrics.SurveyEngine.addOnload(function() {
function hideEl(element) {
element.hide();
}
var nb = $('NextButton');
hideEl.defer(nb);
$(this.questionId).down('.InputText').on('keyup', function(event) {
if(this.value.length == 0) nb.hide();
else nb.show();
});
});

in my form I checked input radio and image changes, but I fill input text and the image changes back

Okey, here goes my big problem:
I have this form, which has a submit button that only enables when you have checked and filled both inputs (there is no problem with that). If you follow these steps, you will realize where my problem is:
Load this jsfiddle https://jsfiddle.net/ozLmdx4o/ don't pay to much attention to the code now, just look at the form: there is a default profile image, an empty input text, an unchecked input radio, and a disabled submit button.
Test the form: fill the input text and check the input radio and observe how the default profile image changes to another image. Check and uncheck the input radio to observe how the image is linked to this input. This is the key of all this.
But, what if your input text was filled wrong? so delete whatever you entered in the input text and start over again... but...what? The image has returned to the default profile image! even if it was linked to the input radio! why???
Why this happens?
Now you can check the code, because there must be somewhere something I have missed. Can anybody help me to keep the image linked to the input radio button?
input radio button unchecked = default profile image.
input radio button checked = special image.
//INPUT RADIO ON & OFF CODE
var prv1;
var markIt1 = function(e) {
if (prv1 === this && this.checked) {
this.checked = false;
prv1 = null;
} else {
prv1 = this;
}
checkIfValid();
if (!e.target.checked) {
var img = document.getElementById('theimage');
img.src = 'https://s17.postimg.org/7gc66bzu7/user.jpg';
}
};
//TURN ON AND OFF FUNCTIONS
$(function() {
$('input.whatever_class').on('click', markIt1);
$('input[type=text]').on('keyup', markIt1);
});
var sbmtBtn = document.getElementById('SubmitButton');
sbmtBtn.disabled = true;
//CHANGE IMAGES
function changeImage(imgName) {
image = document.getElementById('theimage');
image.src = imgName;
}
function checkIfValid() {
var current = $('input[type=radio]:checked');
if ((current.length >= 1) && ($('input[type=text]').val() != "")) {
sbmtBtn.disabled = false;
} else {
sbmtBtn.disabled = true;
}
};
I would like the image to not change anytime I modify the input text.
Can anyone fix my code just the necessary to solve that problem?
Thanks!
Add this check:
if (!e.target.checked && !document.getElementById('whatever_id').checked) {
var img = document.getElementById('theimage');
img.src = 'https://s17.postimg.org/7gc66bzu7/user.jpg';
}
It is running the check function on input text and not getting checked and hence the problem. Hope it helps.
PS: I have kept e.target.checked but if not required then you can remove it.
You're using markIt1() as an event handler for both the textbox and the radio button. The value of e.target.checked is misleading because e.target could be the textbox or the radio button. e.target.checked always returns false for the textbox. I would use a separate event handler for each.

validation on textbox depending on selectbox selected value change event in jquery

validation on textbox depending on selectbox selected value change event in jquery.
Below code working fine for first time or page refresh case.
but if i select 'NID' first and again change to 'PST' length part working when i select 'PST' first and again change to 'NID' length part notworking.
$(document).ready(function(){
$('#seIdproof').change(function(){
var PFID = $('#seIdproof').val();
$('#seCustomerId').val('');
if(PFID == 'PST'){
$('#seCustomerId').keyup(function(e) {
var len3=$(this).val().length;
if (len3 > 6){
alert("This Id proof number is not valid,Please enter valid number.");
$(this).val('');
}
});
}
if(PFID == 'NID'){
$('#seCustomerId').keyup(function(e) {
var len1=$(this).val().length;
if (len1 > 11){
alert("This Id proof number is not valid,Please enter valid number.");
$(this).val('');
}
});
}
});
});
Can anybody please suggest.
Thanks
try use .keyup(function(e) {
and add this code
e.preventDefault()
delete lines of return code and only put $(this).val('');

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

Categories