Archief - Jquery validate telefoonnummers

witte! · 30 mrt 2011

Hallo allemaal,

Ik ben bezig met het valideren van een form.
De bedoeling is dat wanneer mensen een telefoonnummer of gsmnummer ingeven enkel cijfers + / - () . toegelaten worden.
Het maakt niet uit hoe de nummers in de mysql database belanden als er maar geen andere tekens dan die wat toegelaten zijn worden opgenomen.

In mijn zoektocht om dit probleem op te lossen ben ik bij jquery beland.
Op dit moment gebruik ik het volgende maar dit schijnt niet te werken:

$.validator.addMethod('myPhone', function(value) {
return (10 <= numbers && numbers <= 20 && value.match(/^\+[1-9]{3}\d{7}$/));
}, 'Please enter a valid phone number');

Als men op submit klikt gaat hij in bovenstaand geval toch door of geeft hij zelfs niet aan dat het fout is.
Ik heb al liggen kijken in de jquery.validat.js file hoe men daar te werk gaat maar dat is me een brug te ver. Ik zit namelijk met een deadline.

Ik begrijp dat mijn regex niet helemaal klopt want ik bepaal een vooropgesteld formaat.
Ik zou dus iets moeten hebben dat gewoon kijkt naar het ingegeven nummer en dit checkt zodat alleen + / - () . toegelaten worden.

Alvast bedankt voor jullie hulp!

Groeten

Reflectus · 30 mrt 2011

Zelf doe ik zo'n zaken server-side met een php-functie; preg_match.
Hoe ik het in jouw geval zou aanpakken:

Code:

//kijken of enkel die nummers/tekens voorkomen
if(preg_match("/^\+[1-9]{3}\d{7}$/",$telefoonnummer)
 {
 //kijken of het nummer een juiste lengte heeft
 if(strlen($telefoonnummer) >= 10 AND strlen($telefoonnummer) <= 20
 {
 //mysql connect & insert into
 }else{echo "Telefoonnummer te kort/lang!";}
}else{echo "Enkel de tekens "0-9 + / - () ." zijn toegelaten!";}

Zoiets dus.

witte! · 30 mrt 2011

Reflectus zei:
Zelf doe ik zo'n zaken server-side met een php-functie; preg_match.
Hoe ik het in jouw geval zou aanpakken:

Code:

//kijken of enkel die nummers/tekens voorkomen if(preg_match("/^\+[1-9]{3}\d{7}$/",$telefoonnummer) { //kijken of het nummer een juiste lengte heeft if(strlen($telefoonnummer) >= 10 AND strlen($telefoonnummer) <= 20 { //mysql connect & insert into }else{echo "Telefoonnummer te kort/lang!";} }else{echo "Enkel de tekens "0-9 + / - () ." zijn toegelaten!";}

Zoiets dus.

Aan zoiets had ik ook al gedacht maar de user experience is beter als je met javascript onmiddellijk aangeeft dat iets onjuist is met een warning in het rood achter de textbox...
Zo hoef ik de gebruiker niet terug te sturen naar het vorige scherm.
Ik wil hem niet laten submitten zolang de values niet goed zijn...

Zero Grav · 30 mrt 2011

Ge moet het sowieso nog wel een keer doen met PHP als ge het in Javascript doet. Anders schakelt de gebruiker gewoon zijn javascript uit en kan em alles invoeren wat em wil.

That aside is validatie geen ingebouwde functie van JQuery en zijt ge dus met een plugin aan't werken. Om te weten wat er fout is zoudt ge dus best al eens tonen welke plugin en ook welke error em geeft. Ik neem aan dat ge voor die plugin ook JQuery hebt geïmporteerd.

witte! · 30 mrt 2011

Zero Grav zei:
Ge moet het sowieso nog wel een keer doen met PHP als ge het in Javascript doet. Anders schakelt de gebruiker gewoon zijn javascript uit en kan em alles invoeren wat em wil.

That aside is validatie geen ingebouwde functie van JQuery en zijt ge dus met een plugin aan't werken. Om te weten wat er fout is zoudt ge dus best al eens tonen welke plugin en ook welke error em geeft. Ik neem aan dat ge voor die plugin ook JQuery hebt geïmporteerd.

Eerst bovenaan deze code van Plugins/Validation - jQuery JavaScript Library

Code:

<script type="text/javascript" src="jquery.validate.js"></script>

Dan:

Code:

<script type="text/javascript">

	// validate form 
	// validate email address and phone number with jquery.validate
        // deze functie controleert het email adres en de required fields
	$(document).ready(function(){
		$("#cbReqForm").validate();
	});
        // deze functie controleert het telefoonnummer en werkt dus niet
        // correct (reageert niet)
	$.validator.addMethod('myPhone', function(value) {
		return (10 <= numbers && numbers <= 20 && value.match(/^\+[1-9]{3}\d{7}$/)); 
	}, 'Please enter a valid phone number');
       // deze functie voor mobiele nummers
       $.validator.addMethod('myMobile', function(value) {
		// var numbers = value.split(/\d/).length - 1;
		return (10 <= numbers && numbers <= 20 && value.match(/^\+[2-9]{3}\d{8}$/)); 
	}, 'Please enter a valid Mobile Phone number');
</script>

Dan in de html

Code:

<tr>
  <td><label for="lblCaller">Contact: *</label></td>
  <td><input type="text" name="txtContact" class="required" /></td>
</tr>
<tr>
  <td><label for="lblPhone">Phone: *</label></td>
  <td><input type="text" name="txtPhone" class="required myPhone" /></td>
</tr>
<tr>
  <td><label for="lblMobile">Mobile:</label></td>
  <td><input type="text" name="txtMobile" class="required myMobile" /></td></tr>
<tr>
  <td><label for="lblEmail">Email:</label></td>
  <td><input type="text" name="txtEmail" class="email" /></td>
</tr>

Als hij valideert op het email adress dan geeft hij direct fout aan als het niet juist is. Ook laat hij het formulier niet submitten. Graag zou ik dit ook willen met de check op telefoon en mobielnummer.
Het is idd zo dat ik ook nog eens moet checken met php.

Drone · 30 mrt 2011

Moet je de addMethod's niet eerst zetten?

witte! · 31 mrt 2011

[drone]-[1.05];14685902 zei:
Moet je de addMethod's niet eerst zetten?

Je zou die binnen de

Code:

$(document).ready(function(){
		$("#cbReqForm").validate();
	});

moeten plaatsen maar ook dat werkt niet.

Ik denk dat ik best een regex probeer te maken die alleen + / - () . toelaat en ik ga die dan preg_matchen.
Het valideren met javascript laat ik dan maar weg.

Zero Grav · 31 mrt 2011

Ge definieert ook wel nergens in uw javascript de variabele numbers. Waar ge em dan wel declareert is het lokaal en staat hij momenteel in commentaar.

Soit, 'k heb het zelf ook even geprobeerd maar krijg het evenzeer niet klaar. Wat ik ook doe, hij geeft altijd 'null' door. Wat de waarde is die em geeft als geen matches gevonden worden. Hij valideert dus wel, maar 't is altijd fout.

Code:

<!doctype html>
<html lang="nl">
    <head>
        <title>Telefoonvalidatie</title>
        <meta charset="utf-8" />
    
        <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.5.1/jquery.min.js" type="text/javascript"></script>
        <script src="http://ajax.aspnetcdn.com/ajax/jquery.validate/1.8/jquery.validate.min.js" type="text/javascript"></script>
        
        <script type="text/javascript">
        
            function init() {
                //alert('hello world');
                jQuery.validator.addMethod('myPhone', function(value) {

                    var numbers = value.split(/\d/).length - 1;
                    var re = new RegExp('^\b\d{2,3}-*\d{6}\b$');
                    
                    if(String(value).match('^\b\d{2,3}-*\d{6}\b$') != null) {
                        console.log('valid');
                    } else {
                        console.log('invalid');
                    }
                    
                    return (value.match('^\b\d{2,3}-*\d{6}\b$'));
                }, 'Geen correct telefoonnummer');
                
                $("#voorbeeldform").validate({
                    
                });
                
            }
        
            $(document).ready(init);
        
        </script>
    </head>

    <body>
    
    
        <form method="post" action="" id="voorbeeldform">
        
            <fieldset>
                <legend>Telefoonvalidatie</legend>
            
                <label for="phone">Telefoonnummer</label>
                    <input type="text" name="phone" value="012-112233" id="phone" class="required myPhone" />
                    
                <input type="submit" name="submit" value="valideren" />
            </fieldset>
            
        </form>

    
    
    </body>
<html>

Archief - Jquery validate telefoonnummers

witte!

Legacy Member

Reflectus

Legacy Member

witte!

Legacy Member

Zero Grav

Legacy Member

witte!

Legacy Member

Drone

Legacy Member

witte!

Legacy Member

Zero Grav

Legacy Member