如何强迫用户选择 <select>引导程序选项

Question

I've been trying to work the answer out to this for hours and it's driving me insane!

I'm using Twitter Bootstrap and bootstrap-min.js.

Here is my code:

<select id="assettype" name="assettype" class="input-medium required">
   <option>-- Please select --</option>
   <option value="1">Printer</option>
   <option value="2">Scanner</option>
</select>

If a user leaves the form as the '-- Please select --' option then I want an error to prevent the user from submitting the form ie forcing them to make a selection.

Any help would be massively appreciated! Thanks in advance.

Answer 1

Use event.preventDefault()

$('#formId').submit(function (e) {
    if ($('#assettype').val() == '') {
    e.preventDefault(); //stop form submission
}
});

---

or

Using jQuery Validator

 $.validator.addMethod('notNone', function (value, element) { return (value != ''); }, 'Please select an option'); $("form").validate({ rules: { assettype: { required: true, notNone: true } } }); 

Answer 2

This seems you need a simple validation before submitting like

$('#formId').submit(function () {
 if ($('#assettype').val() != '')) {  //Check the value of select
    return true; //allow to submit the form
 }
 else {       
    alert("Please select an option");
    return false;  //Prevent form being submitted
 }
}); 

Answer 3

<form id="my_form" method="POST" action="" >
<select id="assettype" name="assettype" class="input-medium required">
  <option value="0" >-- Please select --</option>
  <option value="1">Printer</option>
  <option value="2">Scanner</option>
</select>
</form>
<script type="text/javascript">
  $("#my_form").submit(
    var check_value = $("#assettype").val();
    if (check_value == 0)
    {
      e.preventDefault();
      // prevent the user he has to choose something
      // by an alert for example, or background change of the element
      $("#assettype").css("background-color", "red");
      return false;
    }
    else
    {
      // and restore it if it's ok
      $("#assettype").css("background-color", "inherit");
    }
    return true;
  });
</script>