jQuery-Validierungs-Plugin, phoneUS-Feld ist brechend Formular

Question

Ich habe an einem einfachen Formular mit dem Jquery-Validierungs-Plugin für die browserseitige Validierung gearbeitet, und aus irgendeinem mir unbekannten Grund scheint es, als ob die 'phoneUS'-Regel zu sein scheint den Rest des Validierungscodes brechen.

Solange dieses Feld ("tel") im Formular leer ist, funktioniert die Validierung wie vorgesehen. Wenn jedoch etwas in das Telefonfeld (einschließlich der Buchstaben) eingegeben wird, wird die Validierung übersprungen und das Formular wird gesendet, selbst wenn andere erforderliche Felder leer gelassen werden. Wenn die 'phoneUS'-Regel jedoch aus dem Code entfernt wird, gelten andere Validierungsregeln, die auf den' tel'-Eingang angewendet werden, weiterhin. Unnötig zu sagen, ich bin völlig verwirrt.

Das Skript ist:

<script type="text/javascript"> 
$(document).ready(function(){ 
$('#survey1').validate({ 
    rules: { 
    firstname: { 
      required: true, 
      },  

    lastname: { 
      required: true 
      }, 

    address1: { 
      required: true 
      }, 

    city: { 
      required: true 
      },  

    state: { 
      required: true 
      }, 

    zip: { 
      required: true, 
      digits: true 
      }, 

    tel: { 
      required: true, 
      phoneUS: true 
      }, 

    email: { 
      email: true 
      } 

    } 



    }); 
}); 

</script> 

die Etiketten und Eingabefelder sind nur einfache Textfelder mit den Namen des Skripts entsprechen. Die Formularaktion ist so eingestellt, dass eine PHP-Datei verwendet wird, um die Ergebnisse per E-Mail an eine statische E-Mail-Adresse zu senden. Wenn irgendwelche anderen Informationen hilfreich wären, werde ich es zur Verfügung stellen.

Ich bin relativ neu zu jQuery, so zögern Sie nicht, Zeiger (überflüssige Zeichen, etc.) anzubieten.

Danke!

Answer 1

jQuery Validate gehört nicht zum Funktionsstandard phoneUS; Sie müssen es hinzufügen. Bevor Sie Ihren $('#survey1').validate() Code, rufen Sie diese Funktion:

// Add US Phone Validation 
jQuery.validator.addMethod('phoneUS', function(phone_number, element) { 
    phone_number = phone_number.replace(/\s+/g, ''); 
    return this.optional(element) || phone_number.length > 9 && 
     phone_number.match(/^(1-?)?(\([2-9]\d{2}\)|[2-9]\d{2})-?[2-9]\d{2}-?\d{4}$/); 
}, 'Please enter a valid phone number.'); 

Answer 2

Sie müssen die additional-methods.js file enthalten, die die phoneUS Regel/Methode enthält.

Alternativ, wenn Sie lieber nicht eine andere JavaScript-Datei enthalten, können Sie manuell fügen Sie einfach die phoneUS Regel/Methode:

jQuery.validator.addMethod("phoneUS", function(phone_number, element) { 
    phone_number = phone_number.replace(/\s+/g, ""); 
    return this.optional(element) || phone_number.length > 9 && 
     phone_number.match(/^(\+?1-?)?(\([2-9]\d{2}\)|[2-9]\d{2})-?[2-9]\d{2}-?\d{4}$/); 
}, "Please specify a valid phone number"); 

DEMO: http://jsfiddle.net/AFpaC/