下拉菜单和单选按钮未通过验证

Question

This is a link to a working form : http://jsbin.com/vuroyaparo/2/

I am trying to validate the form on click of any of the three buttons (radiobutton, 4 estimated daily use button, Save Product)

a) If the user clicks on any of the buttons give an alert that shows all the fields that are empty and keep updating the errors as per input.

As I put in my function returnVal in the code i get Errors in console
Uncaught TypeError: Cannot read property 'catDropdown' of null

It runs my function at the start but does not validate even by 1st drop down. catDropdown is a variable that tags the HTML select element.

For checkbox same issue so I attempted to write 2 options (commented at the end of the js file)

I am missing something. (either big or small) = Ahhh;

Can some one help me please. My first attempt at validation. I am looking at JS solution only since I dont know Jquery.

Thanks

Answer 1

The error Uncaught TypeError: Cannot read property 'catDropdown' of null arises from the fact that you call var energyForm = document.getElementById("energyForm"); yet you have no element in your HTML having ID='energyForm'. You can give the form an ID and reference that or, call document.getElementsByName("energyForm")[0] .

Also notice that the line if(energyForm.catDropdown.selectedIndex = 0){ would be assigning the value 0 to energyForm.catDropdown.selectedIndex, not comparing its value to 0. This aside, you likely just want this line to be: if(catDropdown.selectedIndex == 0){

Further notice that the line var catDropdown = document.getElementById("dd1"); will also return null since you have no element in your HTML with ID='dd1'. The select with ID='ddl' and name='dd1' can be obtained by using var catDropdown = document.getElementById("ddl"); or var catDropdown = document.getElementById("dd1")[0];