validate dynamic html forms with javascript - javascript

Here http://jsfiddle.net/B9r22/17/ I created a two HTML forms and I would like to validate forms with javascript function. First it will be good to check if every required fields were filled in form. I need some universal check function because forms will be dynamic. I write something to check radio buttons. But I don´t know how to solve, if there will be other form.
var formValid = false;
function check(){
var radios = document.getElementsByName("first");
var i = 0;
while (!formValid && i < radios.length) {
if (radios[i].checked) formValid = true;
i++;
}
if (!formValid) alert("error");
return formValid;
}

http://jsfiddle.net/B9r22/18/
var xyz = document.forms;
for(var x = 0; x < xyz.length; x++){
var list_of_nodes = xyz[x];
for(var j = 0; j < list_of_nodes.length; j++){
if(list_of_nodes[j].nodeName == 'INPUT'){
var node = list_of_nodes[j];
console.log(node);
if(node.getAttribute('data-required') == "required" && (node.value == null || !node.checked)){
alert("error"); //replace this line with what you want to do if the form isn't filled
}
}
}
}
document.forms will return all the forms in the document so it doesn't matter if there is 1 or 51. then it just loops though the childNodes that are inputs and checks to see if they are required. If they are and they are not checked or have a null value (probably want to check it against empty string as well) then this will pop up an error.
Obviously this is rough but with one or 2 adjustments it should do the trick.

Related

Disabling/re-enabling form elements with vanilla js - Not working properly

I'm using vanilla JS to try and disable/re-enable form elements depending on the value of one of the form elements selected.
function editableFormElements() {
let formElements = document.getElementById('NewCaseForm').elements;
let assignedTo = document.getElementById('assignedTo');
if(assignedTo.value == "pending")
{
for(x = 0; x < formElements.length; x++){
formElements[x].disabled = true;
}
}
else{
for(x = 0; x < formElements.length; x++){
formElements[x].disabled = false;
}
}
assignedTo.disabled = false;
}
document.getElementById('assignedTo').addEventListener('change', editableFormElements);
I always want the 'assignedTo' element to be enabled, so I'm setting disabled to false again at the end of the function. The problem is, this doesn't seem to work. That form element remains disabled. What am I missing here?

Check Box Validation error

I am using below code for validating the check box
if(!validateForm())
{
alert("Please select intrested in required service");
return false;
}
return true;
}
function validateForm()
{
var c = document.getElementsByTagName('input');
for (var i = 0; i < c.length; i++)
{
if (c[i].type == 'checkbox')
{
if (c[i].checked) {return true}document.myForm.action="thankyou-enquiry-hrservice.php" ;
}
}
return false;
}
I have about 5 check boxes. If checked only 1 then it will go to thankyou-enquiry-hrservice.php. If i select multiple check boxes its not redirecting to that page instead its refreshing the current page with empty fields in website.
when you do:
if (c[i].checked) {return true}document.myForm.action="thankyou-enquiry-hrservice.php"
On the first checked ítem the function will return true and the:
document.myForm.action="thankyou-enquiry-hrservice.php"
Part wont be executed.
As for the 1 checked ítem sending you to the page you want, I'd bet that it's not the first chechbox that you're selecting. So when at least evaluate to false once, it's sending you where you want to go.
As requested a quick fix could be:
function validateForm()
{
var answer = false;
var c = document.getElementsByTagName('input');
for (var i = 0; i < c.length; i++)
{
if (c[i].type == 'checkbox')
{
if (c[i].checked) {
answer = true;
document.myForm.action="thankyou-enquiry-hrservice.php";
}
}
}
return answer;
}
But without knowing anything else of your intentions for this code I can't do anything else.

Selecting ONE radio out of many

I'm trying to "modify/change" the way this code works, I want it to only allow ONE radio button selection out of 30 or more choices. as it is written now, it looks for all selected before submitting. im a noob, please be kind.
<script type="text/javascript">
function checkform() {
//make sure all picks have a checked value
var f = document.entryForm;
var allChecked = true;
var allR = document.getElementsByTagName('input');
for (var i=0; i < allR.length; i++) {
if(allR[i].type == 'radio') {
if (!radioIsChecked(allR[i].name)) {
allChecked = false;
}
}
}
if (!allChecked) {
return confirm('One or more picks are missing for the current week. Do you wish to submit anyway?');
}
return true;
}
function radioIsChecked(elmName) {
var elements = document.getElementsByName(elmName);
for (var i = 0; i < elements.length; i++) {
if (elements[i].checked) {
return true;
}
}
return false;
}
</script>
Use a counter instead of a flag for "allChecked".
Set it to zero. If the element is checked, use allChecked++ then check to see if the value is ONE at the end.

Can we get radiobuttonList.Items.Count in .aspx page

Can we get the count of total radiobuttonlist items from .aspx page. I have to call a javascript function onclientclick of a button and i want to loop through the total number of radiobuttonlist items. So can anyone tell me that can we get it from .aspx page. Because in my scenario i can not use code behind for this.
function ClearRBL() {
for (i = 0; i < RBLCOUNT; i++) {
document.getElementById('rblWorkerList_' + [i]).checked = false;
}
}
How can i get RBLCOUNT here from .aspx page only? If not possible then in Javascript please.
I don't know how the aspx side would work, but if you want to do it just in JavaScript you could do something like the following that doesn't need to know the total number of elements in advance:
function ClearRBL() {
var i = 0,
rbl;
while (null != (rbl = document.getElementById('rblWorkerList_' + i++)))
rbl.checked = false;
}
The above assumes that the element ids end in numbers beginning with 0 counting up by 1s; the while loop will keep going until document.getElementById() doesn't find a matching element (in which case it returns null). A less cryptic way of writing it is as follows:
function ClearRBL() {
var i = 0,
rbl = document.getElementById('rblWorkerList_' + i);
while (null != rbl) {
rbl.checked = false;
i++;
rbl = document.getElementById('rblWorkerList_' + i);
}
}
P.S. When the while loop finishes i will be equal to the number of radio buttons, which may be useful if you want to do something with that number afterwards.
Try this:- This is not exactly what you want but hope it will help you.
function GetRBLSelectionID(RadioButtonListID) {
var RB1 = document.getElementById(RadioButtonListID);
var radio = RB1.getElementsByTagName("input");
var isChecked = false;
var retVal = "";
for (var i = 0; i < radio.length; i++) {
if (radio[i].checked) {
retVal = radio[i].id;
break;
}
}
return retVal;
}
you can give a name all radio button and then get them like this.
var RBLCOUNT= document[groupName].length;
or
var RBLCOUNT= 0;
var inputs = document.getElementsByTagName('input');
for (var i = 0; i < inputs.length; ++i) {
if(inputs[i].type =="radio"){
RBLCOUNT++;
}
}
I just created a javascript function as mentioned by Karthik Harve and found the total number of rows generated dynamically as below: -
function ClearRBL() {
var rblLen = document.getElementById('rblWorkerList');
for (i = 0; i < rblLen.rows.length; i++) {
document.getElementById('rblWorkerList_' + [i]).checked = false;
}
}
It's working on both Mozila and IE.
Thanks alot to all who tried to help.

javascript to create multiple checkboxes in for statement

Hi I am trying to create a bunch of checkboxes without having to make each one currently I have:
function test(obj) {
if (document.getElementByID("info").checked == true) {
document.getElementById("gender")[0].disabled = true;
}
}
and it works for one checkbox but I have been trying to use the code below:
function test(obj) {
var x = obj.name;
var rowCount = $('#List tr').length;
for (var i = 0; i rowCount-1; i++) {
if (x == document.getElementByID("info"["+i+"]).checked == true) {
document.getElementById("gender"["+i+"]).disabled = true;
}
}
}
to create as many checkboxes as I want without me having to make each one but it doesn't seem to be working.
Ok, lets start from the beginning:
To create a check-box in javascript you must do something like this:
var checkbox = document.createElement("input");
checkbox.type = "checkbox";
Then to add your checkbox into a div on your webpage you would do something like:
document.getElementById("your_div_id").appendChild(checkbox);
Then to see if the checkbox is checked you look at the "checked" property like so:
var isChecked = !!document.getElementById("your_checkbox").checked;
if(isChecked == true){
// Do whatever you want
}
Here's a function that would loop through a bunch of checkboxes
function testCheckBoxes(container_id){
var checkboxes = document.querySelector("#" + container_id + " > input[type='checkbox']");
for(var i = 0; i < checkboxes.length; i++){
if(!!checkboxes[i].checked == true){
// Your code
}
}
[Side Note: I'm using document.querySelector for consistency but since I think you're using jquery then use $ instead]
If you want to do something when someone clicks on your checkbox the use an event listener:
var list = document.getElementsByClassName("checkbox");
for(var i = 0; i < list.length; i++){
list[i].addEventListener('click', function(event){
if(!!event.target.checked == true){
// Do something
}
}, true);
}
Hopefully this is enough to get you started. Good Luck =)

Categories