jquery validation not working on HTML select tag

Question

I had used this jquery validation previously, never encountered a problem before. But on this particular case validation is not done. The ajax code in the submithandler is working even if an option is not selected. This jquery plugin is working fine in another form on the same page itself. I copy pasted this dropdown on that form and it worked. Is there something else to keep in mind while using this plugin? Or is it a syntax error?

<table>
        <hr>
            <form  id="statuschange" class="reg-page" >
                <tr style="width:100%"> 
                    <td style="width:20%">                                                          
                        <strong>Change Status:</strong>
                    </td>
                    <td style="width:10%"></td>                                         
                    <td style="width:50%">
                        <div class="input-group margin-bottom-20">
                            <span class="input-group-addon"><i class="fa fa-gear"></i></span>
                            <input type="hidden" id="hiddenid" name="hiddenid" value={{.LeadId}}>
                            <select id="changeprocess" name="changeprocess" class="form-control">
                                <option disabled selected>Choose Process</option>
                                {{range .Process}}
                                    <option value="{{.}}">{{.}}</option>
                                {{end}} 
                            </select>
                        </div>                                                                      
                    </td>
                    <td style="width:20%">                                                          
                        <button class="btn-u btn-block pull-right" type="submit">Change</button>
                    </td>                                                                                                   
                </tr>
            </form>
        </table>

My javascript is as follows:-

$("#statuschange").validate({
            rules: {
                changeprocess:"required"                    
            },
            messages: {
                changeprocess: "Please choose from dropdown"
            },
            submitHandler: function(){
                 $.ajax({
                    url: '/changestatus',
                    type: 'post',
                    dataType: 'html',
                    data : { changeprocess: $('#changeprocess').val(),hiddenid: $('#hiddenid').val()},
                    success : function(data) {
                        location.reload();
                    }
                });
            }
        });

Answer 1

由于未将value属性用于默认选项，因此将其文本视为其值

<option value="" disabled selected>Choose Process</option>

Answer 2

Use required .

<select id="changeprocess" name="changeprocess" required>
    <option value="" hidden="hidden">Choose Process</option>
    {{range .Process}}
    <option value="{{.}}">{{.}}</option>
    {{end}} 
</select>

Answer 3

Problem seemed to me is the structure of the markup, which is in a way is invalid. As table element can't have a hr/form as a direct child other than tbody .

So you can put the table inside form element.

<form id="statuschange" class="reg-page">
  <table>
    <tr style="width:100%">
      <td style="width:20%">
        <strong>Change Status:</strong>
      </td>
      <td style="width:10%"></td>
      <td style="width:50%">
        <div class="input-group margin-bottom-20">
          <span class="input-group-addon"><i class="fa fa-gear"></i></span>
          <input type="hidden" id="hiddenid" name="hiddenid" value={{.LeadId}}>
          <select id="changeprocess" name="changeprocess" class="form-control">
            <option disabled selected>Choose Process</option>
            {{range .Process}}
            <option value="{{.}}">{{.}}</option>
            {{end}}
          </select>
        </div>
      </td>
      <td style="width:20%">
        <button class="btn-u btn-block pull-right" type="submit">Change</button>
      </td>
    </tr>
  </table>
</form>