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();
                    }
                });
            }
        });

invalid markup. Table can't have form as a direct child but you can put that in the td. — Jai
– Jai, Commented Mar 10, 2016 at 9:02

Jai · Accepted Answer · 2016-03-10 09:21:16Z

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>

Arun P Johny · Accepted Answer · 2016-03-10 09:04:18Z

1

Since you are not using the value attribute for the default option, its text is considered as its value

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

answered Mar 10, 2016 at 9:04

Arun P Johny

389k68 gold badges532 silver badges532 bronze badges

Comments

sanjay joon · Accepted Answer · 2016-03-10 09:08:37Z

1

Use required .

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

answered Mar 10, 2016 at 9:08

sanjay joon

1331 silver badge15 bronze badges

1 Comment

Arun P Johny Over a year ago

then what is changeprocess:"required"

Collectives™ on Stack Overflow

jquery validation not working on HTML select tag

3 Answers 3

Comments

Comments

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest