Jquery Formular Validierung funktioniert nicht nach Einfügen Datepicker

Question

Ich möchte ein Buchungsformular mit Datumspicker Textfeld, Name, Kontakt und Bla Bla bla erstellen.

Die Validierung funktioniert gut, während mein Formular den Namen Eingabe Textfeld, E-Mail-Eingabefeld, Kontakteingabe Textfeld und außer dem Datumsauswahl.

Nachdem ich den jquery Datepicker eingefügt habe, funktioniert die Validierung nicht und der Datepicker funktioniert einwandfrei.

Kann mir jemand bitte helfen?

<script src="js/prototype.js" type="text/javascript"></script> 
<script src="js/validation.js" type="text/javascript"></script> 
<script src="js/effects.js" type="text/javascript"></script> 

<link rel="stylesheet" type="text/css" href="css/style.css" /> 

<script type="text/javascript" src="js/jquery-1.4.4.min.js"></script> 
<script type="text/javascript" src="js/jquery-ui-1.8.7.custom.min.js"></script> 
<link type="text/css" href="css/start/jquery-ui-1.8.7.custom.css" rel="stylesheet" /> 
<script> 
$(function() { 
$("#datepicker").datepicker(); 
}); 
</script> 


<form id="test" action="#" method="get"> 
<fieldset> 
    <!--<legend>Form</legend>--> 
    <div class="form-row"> 
     <div class="field-label"> 
      <label for="name-t2">*Your Name:</label> 
      </div> 
     <div class="field-widget"><input name="name-t2" id="name-t2" class="required" title="Enter your name" /></div> 
    </div> 
    <div class="form-row"> 
     <div class="field-label"><label for="email-t2">*Your Email:</label></div> 
     <div class="field-widget"><input name="email-t2" id="email-t2" class="required validate-email" title="Enter a correct email. E.g. xx@example.com" /></div> 
    </div> 
    <div class="form-row"> 
     <div class="field-label"><label for="contact-t2">Contact Number:</label></div> 
     <div class="field-widget"><input name="contact-t2" id="contact-t2" class="validate-digits" title="Enter your contact number" /></div> 
    </div> 
    <div class="form-row"> 
     <div class="field-label"><label for="datepicker">Departure Date:</label></div> 
     <div class="field-label"> 
      <input id="datepicker" name="datepicker" class="required validate-date-au" type="text" /> 
     </div> 
    </div> 
    <div class="form-row"> 
     <div class="field-label"><label for="ppl-t2">Number of People:</label></div> 
     <div class="field-label"><input name="ppl-t2" id="ppl-t2" class="validate-number" title="Optional: Enter number of people" /></div> 
    </div> 
    <div class="form-row"> 
     <div class="field-label"><label for="budget-t2">Your Budget:</label></div> 
     <div class="field-widget"> 
      <select id="budget-t2" name="budget-t2" class="validate-selection" title="Choose your budget"> 
       <option>Select one...</option> 
       <option>< $100</option> 
       <option>$100 - $250</option> 
       <option>$250 - $500</option> 
       <option>$500 - $750</option> 
       <option>$750 - $1,000</option> 
       <option>> $1,000</option> 
      </select> 
     </div> 
    </div> 
    <div class="form-row"> 
     <div class="field-label"><label for="enquiry-t2">Special Enquiry:</label></div> 
     <div class="field-label"> 
     <input type="checkbox" name="enquiry-t2" id="enquiry-travel" value="Travel" />Travel<br> 
      <input type="checkbox" name="enquiry-t2" id="enquiry-accommadation" value="Accommodation" />Accommodation<br> 
      <input type="checkbox" name="enquiry-t2" id="enquiry-flight" value="Flight Ticket" />Flight Ticket<br> 
      <input type="checkbox" name="enquiry-t2" id="enquiry-other" value="Others" class="validate-one-required" />Others 
     </div> 
    </div> 

    <div class="form-row"> 
     <div class="field-label-textarea"><label for="comment-t2">Your Message:</label></div> 
     <div class="field-label-textarea"> 
       <TEXTAREA NAME="comment-t2" id="comment-t2" class="required" cols=55 rows=10></TEXTAREA> 
     </div> 
    </div> 

</fieldset> 
<input type="submit" value="Submit" /> <input type="button" value="Reset" onClick="valid.reset(); return false" /> 
</form> 

<script type="text/javascript"> 
var valid2 = new Validation('test', {useTitles:true}); 
</script> 

Answer 1

JQuery und Prototype könnte über '$' werden kollidierende.

Versuchen:

<script type="text/javascript"> 
     var $j = jQuery.noConflict() 
     $j(function() { 
       $j("#datepicker").datepicker(); 
      }); 
</script> 

Answer 2

Nachdem ich den Code unten in meiner Funktion Datepicker einzufügen, ist picker Format nicht funktioniert und JQuery Validierung funktioniert:

<script type="text/javascript"> 
    var $j = jQuery.noConflict() 
    $j(function() { 
      $j("#datepicker").datepicker(); 
     }); 
</script> 

Answer 3

JQuery Last zuerst, dann namespace es, dann lade Prototype. Wie andere erwähnt, Namespace Sie JQuery mit der noConflict Funktion:

<link rel="stylesheet" type="text/css" href="css/style.css" /> 

<script type="text/javascript" src="js/jquery-1.4.4.min.js"></script> 
<script type="text/javascript" src="js/jquery-ui-1.8.7.custom.min.js"></script> 
<link type="text/css" href="css/start/jquery-ui-1.8.7.custom.css" rel="stylesheet" /> 

<script type="text/javascript"> 
var myJQ = JQuery.noConflict(); 
</script> 

<!-- now load Prototype --> 
<script src="js/prototype.js" type="text/javascript"></script> 
<script src="js/validation.js" type="text/javascript"></script> 
<script src="js/effects.js" type="text/javascript"></script> 

<!-- now you can't use $ anymore for JQuery, but you can use 'myJQ' --> 
<script> 
myJQ(function() { 
myJQ("#datepicker").datepicker(); 
}); 
</script> 

Hat es nicht getestet, aber es sollte auch so arbeiten ... viel Glück

Answer 4

dieses Problem zu beheben ich meine Implementierung von jQuery Datepicker ersetzt mit der eine hier http://keith-wood.name/uiDatepickerValidation.html

das ist nur eine Erweiterung des jquery Datepicker aber mit extra Validierung, die hervorragend funktioniert.

Ausgezeichnete Bibliothek!

Answer 5

Das Problem mit Ihrem Code ist, dass Ihre jquery-Bibliothek und Prototypbibliotheken miteinander in Konflikt stehen.

Viele JavaScript-Bibliotheken verwenden '$' als Funktions- oder Variablennamen, genau wie jQuery. Hier stehen jquery- und prototypische Bibliotheken in Konflikt mit $. In jQuery ist '$' nur ein Alias ​​für 'jQuery'. Um dies zu beheben, fügen Sie jquery in keinem Konfliktmodus hinzu.

jQuery.noConflict(); 

Fügen Sie alle Ihre jQuery-Code wie folgt:

(function($) {  

    //jquery code goes here.  

})(jQuery); 

den vollständigen Code Siehe:

<script type="text/javascript"> 

jQuery.noConflict(); 

(function($) { 
      $("#datepicker").datepicker(); 
})(jQuery); 

</script> 

Das obige Verfahren, dass Jquery gewährleisten nicht mit der anderen Bibliothek in Konflikt geraten, dh Prototyp in diesem Fall.

Answer 6

Ich scrollte durch die Antworten hier und stimme mit den anderen überein, jQuery.noConflict() wird benötigt. Es sieht so aus, als ob du Prototypen und Jquery verwendest. Welche haben widersprüchliche Syntax. Da Sie jQuery nach dem Aufruf des Prototyps aufrufen, überschreibt Ihr in gewisser Weise einen Prototyp mit jquery.

Aus Dipali's Antwort ..wenn Sie diese verwenden

<script type="text/javascript"> 
var $j = jQuery.noConflict() 
$j(function() { 
     $j("#datepicker").datepicker(); 
    }); 

und ersetzen diese (von Ihrer ursprünglichen Post):

<script> 
$(function() { 
$("#datepicker").datepicker(); 
}); 
</script> 

sowohl Prototypen und jquery werden in Harmonie arbeiten. Beachten Sie auch jede weitere jquery, die Sie auf Ihrer Seite tun werden $ j davor $

Answer 7

Post Anfrage nur die Get Anforderung benötigen. Wenn Sie das Formular verwenden, um die Daten vom Formular an den Server zu senden, der die Daten verarbeiten kann, muss es POST and not Get. sein. Das ist die einzige Änderung, die Sie machen müssen, damit Ihre Validierungen funktionieren. Sehen Sie sich diese JsFiddle Out: The Solution

Answer 8

fügen Sie einfach den onClose in picker

$('#date').datepicker({ 
    onClose: function() { 
     $(this).valid(); 
    } 
});