I've combed a ton of the pages on here, and still am incapable to get my explicit validator to work. Basically, when the submit button is clicked, I want the script to verify a radio is checked, if one is checked to do nothing. If one isn't checked I want it to post an alert message.
roughly my html looks like:
<form id="myForm" onsubmit = "check()">
<input type = "radio" name = "c" id = "1" value = "1" />
<input type = "radio" name = "c" id = "2" value = "2" />
<input type = "radio" name = "c" id = "3" value = "3" />
<input type = "submit" value = "Submit" />
my JS page looks like:
function check() {
var r = document.getElementsByName("c")
var c = 0
for(var i=0; i < r.length; i++){
if(c[i].checked) {
c = i; }
}
alert("please select radio");
}
try this one
function check() {
var r = document.getElementsByName("c")
var c = -1
for(var i=0; i < r.length; i++){
if(r[i].checked) {
c = i;
}
}
if (c == -1) alert("please select radio");
}
this
c[i].check
should be
c[i].checked
and you're not actually doing anything with the result, you're just always alerting.
<html>
<head>
<script language="javascript">
function check() {
chosen = ""
len = document.myform.chk.length
for (i = 0; i <len; i++) {
if (document.myform.chk[i].checked) {
chosen = document.myform.chk[i].value
}
}
if (chosen == "") {
alert("No Option selected");
return false;
}
else {
alert("option selected");
return true;
}
}
</script>
</head>
<body>
<form name="myform" onsubmit = "return check();">
<input type = "radio" name = "chk" id = "1" value = "1" >
<input type = "radio" name = "chk" id = "2" value = "2" >
<input type = "radio" name = "chk" id = "3" value = "3" >
<input type="submit" value="submit">
</form>
</body>
</html>
Check for this validation hope its may also help you . Also check it in jsfiddle
function ShowMsg() {
if (fnSpeciality() == false)
{
document.getElementById("myform").focus();
return false;
}
function fnSpeciality()
{
return fnRblfnSpeciality();
}
function fnSpeciality() {
return fnRblfnSpeciality();
}
function fnRblfnSpeciality() {
var list = document.getElementById('myform'); //Client ID of the radiolist
var inputs = list.getElementsByTagName("input");
var isItemChecked = false;
for (var i = 0; i < inputs.length; i++) {
var listItem = inputs[i];
if (listItem.checked) {
//alert(listItem.value);
isItemChecked = true;
break;
}
}
if (isItemChecked == false) {
if (isItemChecked =="") {
alert('Please select a speciality.');
return false;
}
// else return true;
}
return true;
}
CreditCard
DebitCard
By Cash
</td>
</tr>
Am using radio button list ..pls share if have java script validation for this radio button
Related
i have a textbox1 which input by user and textbox2 for user to input numbers which can automatically generate textbox1 value into multiple string such as example below:
Txtbox1 = ABC12345
Txtbox2 = 3
Result will be
ABC12345-1
ABC12345-2
ABC12345-3
You can try using something like this below, but kinda hard to make it 100% as you want, since you haven't shown any HTML.
$("[id^=Txbox]").keyup(function() {
var empty = $("[id^=Txbox]").filter(function() {
return $.trim($(this).val()).length == 0
}).length == 0;
if (empty) {
var str = $("#Txbox1").val();
var number = $("#Txbox2").val();
var arr = [];
for (i = 0; i < number; i++) {
arr.push(str + "-" + i)
}
console.log(arr)
}
})
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input id="Txbox1" />
<input id="Txbox2" type="number" />
You can just use button and apply click event.
function getString() {
var finalString = [];
var t = $("#textbox1").val()
var n = $("#textbox2").val();
if (t.toString().trim() != "") {
for (i = 0; i < n; i++) {
finalString.push(t + "-" + (i + 1))
}
}
console.log(finalString)
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
Text : <input type="text" id="textbox1"><br><br> Number : <input type="text" id="textbox2">
<button type="button" onClick="getString()" id="textbox1">Get</button>
I'm trying to get a basic javascript validation. For some reason it's picking up text and drop downs but not radio buttons? What am I doing wrong?
JS Fiddle
<script>
function validateForm(formId)
{
var inputs, index;
var form=document.getElementById(formId);
inputs = form.getElementsByTagName('input');
for (index = 0; index < inputs.length; ++index) {
// deal with inputs[index] element.
if (inputs[index].value==null || inputs[index].value==""))
{
alert("Field is empty");
return false;
}
}
</script>
To validate for radio buttons, You need to go through all radio's and see which one's checked property is true.
<script>
function validateForm(){
for(i=0; i<document.form.radios.length; i++){
if(document.form.radios[i].checked==false){
c=1;
}
else{
c=0;
break;
}}
if(c==1){
alert('Please select an option');
}
}
</script>
document.form.radios.length gives the number of radio buttons.
You can also use HTML's required attribute to achieve the same functionality.
<form>
<input type="radio" name="gender" value="Male" required /> Male
<input type="radio" name="gender" value="Female" /> Female
<input type="submit" name = "sub" value="SAVE" />
</form>
Fiddle
Provided below is an approach you can take to identify if you have multiple radio buttons in your form
function hasEmptyRadio(radioMap) {
var emptyRadio = false;
for (var i in radioMap) {
if (radioMap.hasOwnProperty(i) && !radioMap[i]) {
emptyRadio = true;
break;
}
}
return emptyRadio; // return the radio object or name if required
}
function markEmptyRadios(radioMap, radioObj) {
var checked = radioObj.checked;
radioMap[radioObj.name] = radioMap[radioObj.name] || checked;
}
function validateForm(formId) {
var inputs, index;
var radioMap = {};
var form = document.getElementById(formId);
inputs = form.getElementsByTagName('input');
for (index = 0; index < inputs.length; ++index) {
if (inputs[index].type === 'radio') {
markEmptyRadios(radioMap, inputs[index])
}
// Your check for other input type can go here
}
alert("Radio Empty check returned => " + hasEmptyRadio(radioMap));
}
Here is the issue: I am trying check and uncheck the check boxes by a group.
So if you select G1 and G2, it throws a message that you cant mix groups. If you uncheck all of them, i am trying to clear the existing grouping and that is where the code seems to fail.
Any thoughts? (also,i might be having a wrong idea about that global var at the beginning. so please suggest)
<HTML>
<script language="javascript">
var prodSel="";
function VerifyGroup(a,b)
{
ClearAllSelectionsA(); // check if this is the last unselect and clear the prodSel variable
if (prodSel == "")
{
prodSel = a;
}else
{
if (prodSel != a)
{
alert ( "Please ensure that the groups are same for the items you select");
//alert(b);
document.getElementById(b).checked = false;
}
}
}
function ClearAllSelections()
{
var inputs = document.getElementsByTagName("input");
var cbs = [];
for (var i = 0; i < inputs.length; i++)
{
if (inputs[i].type == "checkbox")
{
inputs[i].checked = false;
}
}
prodSel=""; // Clear the variable; allow new selections
}
/*loop through and if all of them are unchecke,d clear the variable*/
function ClearAllSelectionsA()
{
var clre = true;
var inputs = document.getElementsByTagName("input");
var cbs = [];
for (var i = 0; i < inputs.length; i++)
{
if (inputs[i].type == "checkbox")
{
if (inputs[i].checked){clre= false;}
}
}
if (clre){
prodSel=""; // Clear the variable; allow new selections
alert(window.prodSel);
}
}
</script>
<body>
G1<input type="checkbox" value="zxc" id="12" onclick="javascript:VerifyGroup('g1',12);"><BR>
G1<input type="checkbox" value="zxcw" id="123" onclick="javascript:VerifyGroup('g1',123);"><BR>
G1<input type="checkbox" value="zxcdw" id="124" onclick="javascript:VerifyGroup('g1',124);"><BR>
G2<input type="checkbox" value="zxcf" id="125" onclick="javascript:VerifyGroup('g2',125);"><BR>
G2<input type="checkbox" value="zxcfg" id="126" onclick="javascript:VerifyGroup('g2',126);"><BR>
clear group
</body>
</html>
When you call ClearAllSelectionsA, if all the checkboxes are unchecked, then prodSel gets cleared. Then back in VerifyGroup, prodSel is immediately being reassigned to a. My recommendation would be to return true or false from ClearAllSelectionsA and act based upon that value.
<script language="javascript">
var prodSel="";
function VerifyGroup(a,b)
{
var cleared = ClearAllSelectionsA(); // check if this is the last unselect and clear the prodSel variable
if (prodSel == "" && !cleared) //only reset prodSel if there is a checkbox checked
{
prodSel = a;
}else
{
if (prodSel != a)
{
alert ( "Please ensure that the groups are same for the items you select");
//alert(b);
document.getElementById(b).checked = false;
}
}
}
function ClearAllSelections()
{
var inputs = document.getElementsByTagName("input");
var cbs = [];
for (var i = 0; i < inputs.length; i++)
{
if (inputs[i].type == "checkbox")
{
inputs[i].checked = false;
}
}
prodSel=""; // Clear the variable; allow new selections
}
/*loop through and if all of them are unchecke,d clear the variable*/
function ClearAllSelectionsA()
{
var clre = true;
var inputs = document.getElementsByTagName("input");
var cbs = [];
for (var i = 0; i < inputs.length; i++)
{
if (inputs[i].type == "checkbox")
{
if (inputs[i].checked){clre= false;}
}
}
if (clre){
prodSel=""; // Clear the variable; allow new selections
alert(window.prodSel);
}
return clre;
}
</script>
I have the below, it dynamically adds a new value option into a selectbox. The problem i have is that it does not check for duplicate entries before adding new options into the select box.
Is there a way i can make a change to my code so it will alert the user that a duplicate entry is found and to stop adding the same option value?
function refadd() {
var val = document.getElementById('docsref').value
if (val != "") {
var select = document.getElementById('docsref_list');
var option = document.createElement('option');
option.text = value
select.add(option,select.option)
select.selectedIndex = select.options.length - 1;
}
}
Best is to loop through all existing options and check if you had a match.
The loop would be added so it appears BEFORE your IF condition.
If a match is found you could notify the user (e.g. alert ) and then execute a "return" statement.
Something like the below:
function refadd()
{
var value = document.getElementById('docsref').value
if (value != "")
{
var select = document.getElementById('docsref_list');
var option = document.createElement('option');
var flag = 0;
for(var i = 0; i < select.length; i++)
{
if(select[i].value == value)
{
flag = 1;
}
}
if(flag == 1)
{
alert('Value is duplicate.');
}
else
{
option.text = value;
select.add(option,select.option);
select.selectedIndex = select.options.length - 1;
}
}
}
If your HTML is like:
<div>
<input type = "text" name = "docsref" id = "docsref" style = "width:100px;"/>
<input type = "button" name = "addValues" id = "addValues" value = "AddValues" onClick = "refadd();"/>
</br>
<select id = "docsref_list">
<option value = "1">1</option>
<option value = "2">2</option>
</select>
</div>
Hope that helps
using jQuery...
function refadd() {
var val = $("#docsref").val();
if (val != "") {
for(var i = 0; i < select.length; i++)
{
if(select[i].value == value)
{
alert("can't add.");
return false;
}
}
var ob = new Option("option text", "value");
$(ob).html("option text");
$("#selectList").append(ob);
}
}
I wanted to know what would be the best method to validate (to ensure that all 4 of the input boxes are not blank)?
<html>
<head></head>
<body>
<input type="text" id="i1">
<input type="text" id="i2">
<input type="text" id="i3">
<input type="text" id="i4">
</body>
</html>
If they are all to be inputs then you can use document.getElementsByTagName
var allinputs = document.getElementsByTagName("input");
console.log(allinputs);
for (var i = 0; i < allinputs.length; i++) {
if(allinputs[i].value.length == 0){
alert('need to have something here');
return;
}
}
here is a working fiddle
JQuery Validate is an really easy way to validate your fields. You can read more about it at their wiki:
http://docs.jquery.com/Plugins/Validation
My custom method, not cross-browser:
NodeList.prototype.every = HTMLCollection.prototype.every = Array.prototype.every;
var allChecked = document.querySelectorAll('input[type=text]').every(function(el) {
return el.value !== '';
});
if (allChecked) alert("All checked!");
The cross-browser (IE8 and above), not funny way:
var inputs = document.querySelectorAll('input[type=text]');
var allChecked = true;
for (var i = 0, len = inputs.length; i < len; i++) {
if (inputs[i].value === '') {
allChecked = false;
}
}
if (allChecked) alert("All checked!");
HTML:
<input type="button" value="submit" onclick="submitForm()">
JavaScript :
function submitForm()
{
if(validate())
{
alert('No blank found!!');
}
else
{ alert('blank found!!'); }
}
function validate()
{
var i1 =document.getElementById('i1').value;
var i2 =document.getElementById('i2').value;
var i3 =document.getElementById('i3').value;
var i4 =document.getElementById('i4').value;
var result = false;
if( i1 && i2 && i3 && i4) {
result = true;
}
return result;
}