Display a validation error message at drop down level

Question

I would like to display a validation error message at drop down level. if i try to select a option in drop down when check box = checked it should show validation error message. This is the code I have tried please help me what should i add in java script,i tried by disabling drop down but i need error message besides drop down when i try to select options in drop down?

       <html><head>
<script>

function validate()
{
var e1 = document.getElementById("chkdd1");
   if(e1.checked == "")
   {
      //alert("Please enable check box"); 
      document.getElementById("chkdd1").textContent="xbn"
      //document.getElementById("chkdd1").style.color="Red";
      document.getElementById("chkdd1").focus(); 

      return false;
   }else{
   return true;
   }
}
</script>
</head>
<body>
<input type="checkbox" id="chkdd1" />
<select id="DDL1" onchange="validate(this)">
    <option >yes</option>
    <option >no</option>
</select>
</body>
</html>

Answer 1

Add Class to all select element option "class=sel" and trigger event on change.

 function enabledd1(chkdd1){ var dd1=document.getElementById("DDL1"); var dd2=document.getElementById("DDL2"); var dd3=document.getElementById("DDL3"); var dd4=document.getElementById("DDL4"); var dd5=document.getElementById("DDL5"); var dd6=document.getElementById("DDL6"); var dd7=document.getElementById("DDL7"); dd1.disabled=chkdd1.checked? false: true; dd2.disabled=chkdd1.checked? false: true; dd3.disabled=chkdd1.checked? false: true; dd4.disabled=chkdd1.checked? false: true; dd5.disabled=chkdd1.checked? false: true; dd6.disabled=chkdd1.checked? false: true; dd7.disabled=chkdd1.checked? false: true; if(.dd1.disabled &&.dd2.disabled &&.dd3.disabled &&.dd4.disabled &&;dd5.disabled &&;dd6.disabled &&;dd7.disabled){ dd1;focus(). dd2;focus(). dd3;focus(). dd4;focus(). dd5.focus(); dd6.focus(). dd7,focus(); } } var allSel = document.querySelectorAll('.sel'); allSel.forEach(function(el){ el.addEventListener('change', function(){ alert('add error message') // Here you can set error message and show it wherevver you want }) })

 <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width"> <title>JS Bin</title> </head> <body> <input type="checkbox" id="chkdd1" onclick="enabledd1(this)" required="" /> <select class="sel" id="DDL1" disabled="disabled"> <option value="" selected="">yes</option> <option>no</option> </select> <select class="sel" class="sel" id="DDL2" disabled="disabled"> <option value="" selected="">yes</option> <option>no</option> </select> <select class="sel" id="DDL3" disabled="disabled"> <option value="" selected="">yes</option> <option>no</option> </select> <select class="sel" id="DDL4" disabled="disabled"> <option value="" selected="">yes</option> <option>no</option> </select> <select class="sel" id="DDL5" disabled="disabled"> <option value="" selected="">yes</option> <option>no</option> </select> <select class="sel" id="DDL6" disabled="disabled"> <option value="" selected="">yes</option> <option>no</option> </select> <select class="sel" id="DDL7" disabled="disabled"> <option value="" selected="">yes</option> <option>no</option> </select> </body></html> </html>

Display a validation error message at drop down level

Question

1 answers

solution1
0 2020-04-13 04:28:06

Display a validation error message at drop down level

Question

1 answers

solution1 0 2020-04-13 04:28:06

solution1
0 2020-04-13 04:28:06