jQuery Plugin di convalida, il campo phoneUS è in fase di interruzione

Question

Ho lavorato a un modulo semplice utilizzando il plug-in di convalida jquery per la convalida del browser e, per qualche ragione, a mia insaputa sembra che la regola "phoneUS" sembri essere rompendo il resto del codice di convalida.

Fintantoché tale campo ("tel") è vuoto sul modulo, la convalida funziona come previsto. Ma se qualcosa viene inserito nel campo telefonico (comprese le lettere), la convalida viene saltata e il modulo viene inviato, anche se gli altri campi obbligatori sono lasciati vuoti. Tuttavia, se la regola "phoneUS" viene eliminata dal codice, si applicano ancora le altre regole di convalida applicate all'input "tel". Inutile dire che sono completamente confuso.

Lo script è:

<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> 

delle etichette e dei campi di input sono solo semplici caselle di testo con nomi corrispondenti script. L'azione modulo è impostata per utilizzare un file php per inviare i risultati via email a un indirizzo di posta elettronica statico. Se qualche altra informazione sarebbe utile, la fornirò.

Sono relativamente nuovo a jQuery, quindi sentitevi liberi di offrire puntatori (caratteri superflui, ecc.).

Grazie!

Answer 1

jQuery Validate non viene fornito con lo standard di funzione phoneUS; devi aggiungerlo. Prima che il codice di $('#survey1').validate(), chiamare questa funzione:

// 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

È necessario includere il additional-methods.js file che contiene la regola phoneUS/metodo.

In alternativa, se si preferisce non includere un altro file JavaScript, è possibile aggiungere manualmente solo il phoneUS regola/metodo:

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/