html - make a field mandatory using javascript

I am trying to make a select field mandatory on a web page. I know how to do it with help of JS and form attribute 'onsubmit' and returning the function. But the problem is that form code is already written and I dont know how to add attribute now. Let me know if I can append attribute dynamically from JS. The other way I tried is to call the JS after page loaded. But this isnt making the field mandatory and form can be submitted. Following is my code..

       <!DOCTYPE html>
       <html>
       <head>
       <script>
       function f1()
       {
           var countryValue = document.getElementById('count ID').value;

    if (countryValue == "") 
    {
            alert("field value missing");
        return false;
    }
    var stateValue = document.getElementById('state ID').value;
    if (stateValue == "") 
    {
            alert("state field value missing");
        return false;
    }
}

      </script>
     </head>
     <body>
    <form method = "post" action = "33.html">
    Country: <input type="text" id="count ID">
    state: <select id="state ID"> 
             <option></option>
                     <option value="ap">ap</option> 
                     <option value="bp">bp</option> 
                    </select>
    <br>
    <input type = "submit">
    </form>
    <script>window.onload=f1</script>

            </body>
            </html>

Please help.

       <!DOCTYPE html>
       <html>
       <head>
       <script>
       function f1()
       {
           var countryValue = document.getElementById('count ID').value;

    if (countryValue == "") 
    {
            alert("field value missing");
        return false;
    }
    var stateValue = document.getElementById('state ID').value;
    if (stateValue == "") 
    {
            alert("state field value missing");
        return false;
    }
}

      </script>
     </head>
     <body>
    <form method = "post" action = "33.html">
    Country: <input type="text" id="count ID">
    state: <select id="state ID"> 
             <option></option>
                     <option value="ap">ap</option> 
                     <option value="bp">bp</option> 
                    </select>
    <br>
    <input type = "submit">
    </form>
    <script>window.onload=f1</script>

            </body>
            </html>

Please help.

Share Improve this question asked Jan 30, 2014 at 6:45 Vineeth Varma 6093 gold badges9 silver badges15 bronze badges

if (thereIsAnError()) {myButton.disabled=true} – bjb568 Commented Jan 30, 2014 at 6:49
you have space on your id – HTTP Commented Jan 30, 2014 at 6:52

Add a ment |

3 Answers 3

Sorted by: Reset to default 0

Have a look at this since you have messed up the IDs

Live Demo

window.onload=function() {
  document.forms[0].onsubmit=function() { // first form on page
    var countryValue = this.elements[0].value; // first field in form
    if (countryValue == "") {
      alert("Please enter a country");
      return false;
    }
    var stateIdx = this.elements[1].selectedIndex; // second field
    if (stateIdx < 1) { // your first option does not have a value 
      alert("Please select a state");
      return false;
    }
    return true; // allow submission
  }
}

PS: It is likely that POSTing to an html page will give you an error

To get the last button to do the submission

window.onload=function() {
  var form = document.forms[0]; // first form
  // last element in form:
  form.elements[form.elements.length-1].onclick=function() { 
  ...
  ...
  ...
   this.form.submit(); // instead of return true
  }
}

Once you've got a function to detect improper values (empty mandatory field or anything else, like a bad e-mail address for instance) you have a few different options :

disable the submit button
cancel the onclick event on the button
cancel the submit event on the form

disabling the submit button can be annoying for the user (it might flash on and off while the values are entered).

I had the same issue, but i made a extension. Using hook system to translate fields with "*", in the names, to validate like required field. This is a simple solution not intrusive where is not required addition of fields in the database, only by the use of sufix "*" in configuration of custom fields.

There is the code: https://github./voiski/bugzilla-required-field

科技改变生活-雨落星辰 - 所有的伟大,都源于一个勇敢的开始

html - make a field mandatory using javascript - Stack Overflow

3 Answers 3

与本文相关的文章

评论列表(0)