1

Ich bin neu bei Front-End-Validierungen, also habe ich auf eine kleine Hilfe hier gehofft.Ich verwende JQuery Validate Plugin zu validieren mein Formular vor der Einreichung. Hier ist eine kurze Probe meiner Form:JQuery-Validate Plugin: Mein Formular wird beim Hinzufügen von Regeln zur Eingabe "Datei" gesendet.

<form method="POST" action="{{ route('employees.store') }}" name="createEmployeeForm" enctype="multipart/form-data"> 
 
    <input name="_token" type="hidden" value="{{ csrf_token() }}" /> 
 
    <input type="text" id="FirstName" name="FirstName"> 
 
    <input type="text" id="LastName" name="LastName"> 
 
    <input type="file" id="employee-image" name="employee_image"> 
 
    <button id="submit_btn" type="submit">Submit</button> 
 
</form>

ich von Regeln auf meine Eingaben „Vorname und Nachname“ Satz hinzugefügt. Wenn ich auf die Schaltfläche "Abschicken" klicke, wird das Formular vor der Einreichung validiert. Dies ist Gut. Wenn ich jedoch Regeln und benutzerdefinierte Validierungsmethoden hinzufüge (Eingabe vom Typ "Datei"), wird das Formular an die Serverseite gesendet und keine vorherigen Validierungen auftreten. Hier ist meine js:

$(document).ready(function() { 
 
     $.validator.addMethod('filesize', function(value, element, param) { 
 
     return this.optional(element) || (element.files[0].size <= param) 
 
     }); 
 
     $("form[name='createEmployeeForm']").validate({ 
 
      rules: { 
 
      FirstName: "required", 
 
      LastName: "required", 
 
      employee_image: { 
 
       accept: "jpg,png,jpeg,gif", 
 
       filesize: 1048576 
 
      } 
 
      }, 
 
      // Specify validation error messages 
 
      messages: { 
 
      employee_image: { 
 
       accept: "uploaded file should have an image-extension : jpg,png,jpeg,gif and less than 1 MB " 
 
      }, 
 
      submitHandler: function(form) { 
 
       form.submit(); 
 
      } 
 
      }); 
 
     });

ich prevent auf die Submit-Button versucht und return false in der Prozedur unterwerfen, aber nichts scheint zu funktionieren, und ich möchte nicht mein Formular abschicken über Ajax. Guidance

+0

Haben Sie sicherstellen, dass der Zusatz Methoden-Datei enthalten? Die Methode "accept" ist nicht Teil des Kerns. Sie müssen auch die Datei additional-methods hinzufügen, um sie zu erhalten. Auch sollten "Nachrichten" nicht in "Regeln" sein, es sollte für sich allein sein. Siehe https://jsfiddle.net/Arkni/yasutt29/ – Arkni

+0

Danke für Ihren Kommentar, es funktioniert jetzt gut. Ich kannte keine 'accept' Exits in der additional-methods Datei. Was die "Nachrichten" innerhalb von "Regeln" betrifft, war es ein Tippfehler, als ich das Snippet geschrieben habe. Ich werde es aktualisieren. Danke nochmal :) @Arkni – NNMMs

Antwort

1

„accept“ geschätzt wird, Verfahren als Add-on zur Verfügung gestellt, deshalb sollten zusätzliche Methode Datei in der Dokumentation wie erwähnt aufgenommen werden:

Einige weitere Verfahren sind vorgesehen, wie Add-Ons, und sind derzeit enthalten in zusätzliche-methods.js im Download-Paket. Nicht alle von ihnen sind dokumentiert hier:

accept - Macht einen Datei-Upload nur bestimmte Mime-Typen akzeptieren.
creditcard - Lässt das Element eine Kreditkartennummer erfordern.
Erweiterung - Lässt das Element eine bestimmte Dateierweiterung erfordern.
phoneUS - Bestätigung der gültigen US-Telefonnummer.
require_from_group - Stellt sicher, dass eine bestimmte Anzahl von Feldern in einer Gruppe vollständig ist.

Referenz: JQuery Validate Documentation

Verwandte Themen