J'avais utilisé cette validation jquery auparavant, je n'ai jamais rencontré de problème auparavant. Mais sur ce cas particulier, la validation n'est pas effectuée. Le code ajax dans le gestionnaire de soumission fonctionne même si aucune option n'est sélectionnée. Ce plugin jquery fonctionne bien sous une autre forme sur la même page elle-même. J'ai copié collé cette liste déroulante sur ce formulaire et cela a fonctionné. Y a-t-il autre chose à garder à l'esprit lors de l'utilisation de ce plugin? Ou s'agit-il d'une erreur de syntaxe?

<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>

Mon javascript est le suivant: -

$("#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();
                    }
                });
            }
        });
0
Arjun Ajith 10 mars 2016 à 11:56

3 réponses

Meilleure réponse

Le problème me semblait être la structure du balisage, qui est en quelque sorte invalide. Comme l'élément table ne peut pas avoir un hr/form comme enfant direct autre que tbody.

Vous pouvez donc mettre l'élément table à l'intérieur de l'élément form.

<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>
1
Jai 10 mars 2016 à 09:21

Puisque vous n'utilisez pas l'attribut value pour l'option par défaut, son texte est considéré comme sa valeur

<option value="" disabled selected>Choose Process</option>
1
Arun P Johny 10 mars 2016 à 09:04

Utilisation requise.

<select id="changeprocess" name="changeprocess" required>
    <option value="" hidden="hidden">Choose Process</option>
    {{range .Process}}
    <option value="{{.}}">{{.}}</option>
    {{end}} 
</select>
1
sanjay joon 10 mars 2016 à 09:08