2016-09-27 2 views
0

Ich habe den folgenden HTML-CodejQuery Validierung auswählen nicht gleich

<!DOCTYPE html> 
<html lang="cs"> 
    <head> 
    <meta charset="UTF-8"> 
    <title>jQuery empty form</title> 
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script> 
     <script src="http://ajax.aspnetcdn.com/ajax/jquery.validate/1.15.0/jquery.validate.js"></script> 
     <script src="js/validate.js"></script> 
    </head> 
    <body> 
     <form action="" id="testform" method="post"> 
      <fieldset> 
       <legend>Osobní údaje:</legend> 
       <label for="firstname">Jméno:</label> 
       <input id="firstname" name="firstname" type="text" /><br /> 
       <label for="surname">Příjmení:</label> 
       <input id="surname" name="surname" type="text" /><br /> 
       <label for="gender">Pohlaví:</label> 
       <select form="testform" id="gender" name="gender"> 
        <option select="selected" value="select">Vyberte pohlaví</option> 
        <option value="man">Muž</option> 
        <option value="woman">Žena</option> 
       </select><br /> 
       <input id="confirm" name="confirm" type="submit" value="Potvrdit" /> 
      </fieldset> 
      <div id="errors"> 
      </div> 
     </form> 
    </body> 
</html> 

und dann folgende jQuery Validierung Skript

jQuery.validator.addMethod("notEqualTo", function(element, value, param){ 
    return this.optional(element) || value != param; 
}); 

$(document).ready(function(){ 
    $("#testform").validate({ 
     onkeyup: function(element){$(element).valid()}, 
     onfocusout: false, 
     errorLabelContainer: "#errors", 
     wraper: "li", 
     rules: { 
      firstname: { 
       minlength: 3, 
       required: true 
      }, 
      surname: { 
       minlength: 2, 
       required: true 
      }, 
      gender: { 
       required: true, 
       notEqualTo: "select" 
      } 
     }, 
     messages: { 
      firstname: { 
       required: "Zadejte své jméno<br />", 
       minlength: "Jméno musí mít délku alespoň 3 znaky<br />" 
      }, 
      surname: { 
       required: "Zadejte své příjmení<br />", 
       minlength: "Příjmení musí mít délku alespoň 2 znaky<br />" 
      }, 
      gender: { 
       notEqualTo: "Zvolte pohlaví<br />" 
      } 
     }, 
    }); 
}); 

Ich habe versucht, meine erste eigene jQuery-Methode notEqualTo zu tun. Aber es funktioniert nicht. Ich möchte das tun, wenn der Benutzer die Option mit Wertauswahl gewählt hat, bedeutet dies, dass er/sie kein Geschlecht wählt. Und wenn es diese Situation ist, sollte die Fehlermeldung erscheinen.

Antwort

0

Geben Sie einfach keinen Wert in select = "ausgewählte" Option und fügen Sie "erforderlich" am Ende der Auswahl.

<select form="testform" id="gender" name="gender" required> 
    <option select="selected" value="">Vyberte pohlaví</option> 
    <option value="man">Muž</option> 
    <option value="woman">Žena</option> 
</select> 
+0

setzen Ich habe auch versucht, Ihren Rat und immer noch keine Fehlermeldung. –

0

JSBIN

Sie müssen die Parameter .. function(element, value, param)-function(value, element, param) ändern. das ist es.

JAVASCRIPT

$.validator.addMethod("notEqualTo", function(value, element, param){ 
     return this.optional(element) || value != param; 
    }); 

MIT MESSAGE

$.validator.addMethod("notEqualTo", function(value, element, param){ 
    return this.optional(element) || value != param; 
},"This field is required"); 

Wenn Sie mehr die Meldung jquery-validation lesen anpassen möchten über

$.validator.addMethod("notEqualTo", function(value, element, param){ 
 
    return this.optional(element) || value != param; 
 
},'this Field is Required'); 
 
$.validator.setDefaults({ 
 
     success: "valid" 
 
    }); 
 
    $("#testform").validate({ 
 
     rules: { 
 
      firstname: { 
 
       minlength: 3, 
 
       required: true 
 
      }, 
 
      surname: { 
 
       minlength: 2, 
 
       required: true 
 
      }, 
 
      gender: { 
 
       required: true, 
 
       notEqualTo: function(){return $('#gender').val()} 
 
      } 
 
     }, 
 
     messages:{ 
 
     gender:{ 
 
     notEqualTo : "Custom Error" 
 
     } 
 
     
 
     } 
 
    }); 
 
$('button').on('click',function(e){ 
 
    e.preventDefault(); 
 
    $("#testform").valid(); 
 

 
})
<script src="https://code.jquery.com/jquery-1.9.1.js"></script> 
 
    <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jquery-validate/1.11.1/jquery.validate.min.js"></script> 
 

 
    
 
<body> 
 
    <form id="testform" > 
 
      <fieldset> 
 
       <legend>Osobní údaje:</legend> 
 
       <label for="firstname">FIRSTNAME:</label> 
 
       <input id="firstname" name="firstname" type="text" /><br /> 
 
       <label for="surname">SURNAME:</label> 
 
       <input id="surname" name="surname" type="text" /><br /> 
 
       <label for="gender">GENDER:</label> 
 
       <select form="testform" id="gender" name="gender"> 
 
        <option select="selected" value="select">SELECT</option> 
 
        <option value="man">MAN</option> 
 
        <option value="woman">WOMEN</option> 
 
       </select><br /> 
 
       <button id="confirm" name="confirm" type="submit" value="SUBMIT">SUBMIT</button> 
 
      </fieldset> 
 
      <div id="errors"> 
 
      </div> 
 
     </form> 
 
</body>

+0

Ich versuchte dies und das gleiche Ergebnis. Keine Fehlermeldung –

+0

wollten Sie benutzerdefinierten Fehler? –

+0

Überprüfen Sie den Link und ich werde die Antwort auch aktualisiert. @ MichalVlasák –

Verwandte Themen