[jQuery] Form Plugin + Validator

Diese Seite verwendet Cookies. Durch die Nutzung unserer Seite erklären Sie sich damit einverstanden, dass wir Cookies setzen. Weitere Informationen

  • [jQuery] Form Plugin + Validator

    Hi Leute,
    ich benutze dieses Form Plugin für jQuery und will es nun in Verbindung mit dem Validation Plugin benutzen. Folgendes Problem tritt dabei auf: Wenn ich das Formular abschicke obwohl einige Eingaben nicht korrekt waren (was auch vom Validation Plugin korrekt angezeigt wird), wird das Formular trotzdem abgeschickt...

    Wie kann ich das vermeiden?

    Ich habe momentan folgenden Quelltext (Die Kommentare von den Demo-Seiten lass ich mal drinnen..)

    Quellcode

    1. $(document).ready(function(){
    2. check = $("#commentForm").validate({
    3. rules: {
    4. datei: {
    5. accept: "jpg|gif"
    6. }
    7. }
    8. });
    10. var options = {
    11. target: '#output2', // target element(s) to be updated with server response
    12. beforeSubmit: showRequest, // pre-submit callback
    13. success: showResponse // post-submit callback
    15. };
    20. // bind to the form's submit event
    21. $('#commentForm').submit(function() {
    22. // inside event callbacks 'this' is the DOM element so we first
    23. // wrap it in a jQuery object and then invoke ajaxSubmit
    24. $(this).ajaxSubmit(options);
    26. // !!! Important !!!
    27. // always return false to prevent standard browser submit and page navigation
    28. return false;
    29. });
    32. });
    35. // pre-submit callback
    36. function showRequest(formData, jqForm, options) {
    37. // formData is an array; here we use $.param to convert it to a string to display it
    38. // but the form plugin does this for you automatically when it submits the data
    39. var queryString = $.param(formData);
    41. // jqForm is a jQuery object encapsulating the form element. To access the
    42. // DOM element for the form do this:
    43. // var formElement = jqForm[0];
    45. alert('About to submit: \n\n' + queryString);
    47. // here we could return false to prevent the form from being submitted;
    48. // returning anything other than false will allow the form submit to continue
    49. return true;
    50. }
    52. // post-submit callback
    53. function showResponse(responseText, statusText) {
    54. // for normal html responses, the first argument to the success callback
    55. // is the XMLHttpRequest object's responseText property
    57. // if the ajaxSubmit method was passed an Options Object with the dataType
    58. // property set to 'xml' then the first argument to the success callback
    59. // is the XMLHttpRequest object's responseXML property
    61. // if the ajaxSubmit method was passed an Options Object with the dataType
    62. // property set to 'json' then the first argument to the success callback
    63. // is the json data object returned by the server
    65. alert('status: ' + statusText + '\n\nresponseText: \n' + responseText +
    66. '\n\nThe output div should have already been updated with the responseText.');
    67. }
    Alles anzeigen

  • Hi, ich hab mich nicht in die Materie eingearbeitet, aber du definierst "nur" Regeln, aber nicht den SubmitHandler.

    Siehe Beispiel "Integration with Form Plugin (AJAX submit)" [1]

    Quellcode

    1. var v = jQuery("#form").validate({
    2. submitHandler: function(form) {
    3. jQuery(form).ajaxSubmit({
    4. target: "#result"
    5. });
    6. }
    7. });


    [1] jquery.bassistance.de/validate…it-intergration-demo.html

  • Ok, das funktioniert jetzt alles ganz gut soweit..
    Nur ich habe das Problem, dass mein JavaScript Code nicht greift, wenn ich einfach im letzten Eingabefeld die Eingabetaste drücke.. Wenn ich mit der Maus auf den Submit Button drücke klappt es komischerweise so wie es klappen sollte..
    Wenn ich die Enter-Taste drücke wird mein JavaScript anscheinend schlichtweg ignoriert :( :( Woran liegt das?

    Hier mein Code:

    Quellcode

    1. <script type="text/javascript">
    2. jQuery(function() {
    3. var v = jQuery("#form").validate({
    4. rules: { datei: {accept: "jpg|gif"}},
    6. submitHandler: function(form) {
    7. check = confirm("Sind Sie sicher, dass diese Eingaben richtig sind?")
    8. if (check == true) {
    9. jQuery(form).ajaxSubmit({
    10. target: "#result",
    11. beforeSubmit: showRequest,
    12. success: toggle(form)
    13. });
    14. return false;
    15. }
    16. }
    17. });
    18. });
    20. function toggle(ref) {
    21. $(ref).slideToggle("slow");
    22. }
    24. </script>
    Alles anzeigen


    Quellcode

    1. <form enctype='multipart/form-data' action='publish.php?do=add' method='post' class='cmxform' id='form'>
    2. <p><b>*</b>Titel: <br><input tpye='text' name='titel' class='required' minlength='8'></p>
    4. <p><b>*</b>Beschreibung: </p><textarea name='beschreibung' cols='45' rows='7' class='required' minlength='8'></textarea>
    5. <p><b>*</b>Vorschaubild: <br><input type='file' name='datei' class='required'>
    6. <span class='formInfo'><a href='./help/help.html?width=375' class='jTip' id='one' name='Hilfe:'>?</a></span></p>
    7. <input type='submit' class='submit' name='submitButton' value='Weiter'>
    8. <br><br><b><p>Die mit * gekennzeichneten Felder müssen ausgefüllt werden!</p></b>
    9. </form>


    Ich hoffe mal mir kann da wieder jemand helfen =)

    Gruß

    Ollo