jquery joomla form validation doesn't work
147 views
Skip to first unread message
Taieb BACCOUCH
Jul 14, 2013, 6:39:16 AM7/14/13
to joomla-de...@googlegroups.com
am using joomla 2.5. i created a custom form and i add some jquery validation. when i submit the form, the submition doesn't trigger jquery validation. here is my code :
<?php
// no direct access
defined('_JEXEC') or die('Restricted access');
//add stylsheet file
$doc = JFactory::getDocument();
$doc->addStyleSheet(JURI::root() . 'modules/mod_mycontact/css/default.css');
$doc->addStyleSheet(JURI::root() . 'modules/mod_mycontact/css/bootstrap-responsive.min.css');
$doc->addStyleSheet(JURI::root() . 'modules/mod_mycontact/css/bootstrap.min.css');
$doc->addScript(JURI::root() . 'modules/mod_mycontact/js/jquery.validate.min.js');
$doc->addScript(JURI::root() . 'modules/mod_mycontact/js/jquery-xxxx.min.js');
?>
<form name="mycontact" id="mycontact" method="post" action="">
<p>
<label for="nom">Nom</label>
<input type="text" name="nom" id="nom" />
</p>
<p>
<label for="prenom">Prénom</label>
<input type="text" name="prenom" id="prenom" />
</p>
<p>
<label for="date">Date de naissance</label>
<input type="text" name="date" id="date" />
</p>
<p>
<label for="commune">Commune</label>
<input type="text" name="commune" id="commune" />
</p>
<p>
<label for="gsm">GSM</label>
<input type="tel" name="gsm" id="gsm" />
</p>
<p>
<label for="email">Email</label>
<input type="email" name="email" id="email" />
</p>
<h3>Quel est votre statut actuellement</h3>
<p><input type="radio" name="statut" value="salarier" id="salarier"/> Salarié plein-temps</p>
<p><input type="radio" name="statut" value="independant" id="independant"/> Independant</p>
<p><input type="radio" name="statut" value="etudiant" id="etudiant"/> Etudiant</p>
<p><input type="radio" name="statut" value="sans_status" id="sans_status"/> Sans statut</p>
<div class="secteur">
<h3>Dans quel secteur d'activité êtes-vous ?</h3>
<p><input type="text" name="secteur" id="secteur"/></p>
</div>
<div class="heure">
<h3>Combien d'heure par semaine allez-vous consacrer à une activité complémentaire</h3>
<p><input type="radio" name="heure" value="heure1" id="heure1" /> Mois de 5 heures</p>
<p><input type="radio" name="heure" value="heure2" id="heure2" /> De 5 à 8 heures</p>
<p><input type="radio" name="heure" value="heure3" id="heure3" /> plus de 8 heures</p>
</div>
<div class="revenu">
<h3>Quel revenu mensuel supplémentaires attendez-vous ?</h3>
<p><input type="radio" name="revenu" value="revenu1" id="revenu1" /> de 200 à 500 €</p>
<p><input type="radio" name="revenu" value="revenu2" id="revenu2" /> de 500 à 1000 €</p>
<p><input type="radio" name="revenu" value="revenu3" id="revenu2" /> de 1000 à 2500 €</p>
<p><input type="radio" name="revenu" value="revenu4" id="revenu3" /> plus de 2500 €</p>
</div>
<div class="vehicule">
<h3>Disposez-vous d'un véhicule ?</h3>
<p><input type="radio" name="vehicule" value="oui" id="vehicule1" /> Oui</p>
<p><input type="radio" name="vehicule" value="non" id="vehicule2" /> Non</p>
</div>
<div class="affinite">
<h3>Avez-vous des affinités avec le secteur des télécoms ou de l'énergie ?</h3>
<p><input type="radio" name="affinite" value="oui" id="affinite1" /> Oui</p>
<p><input type="radio" name="affinite" value="non" id="affinite2" /> Non</p>
</div>
<div class="rencontre">
<h3>Aimez-vous recontrer des gens</h3>
<p><input type="radio" name="rencontre" value="oui" id="rencontre1" /> Oui</p>
<p><input type="radio" name="rencontre" value="non" id="rencontre2" /> Non</p>
</div>
<p>
<input type="submit" name="mycontact_btn" id="my_contact_btn" value="Submit" class="btn" onclick="show();"/>
<input type="reset" name="btn_reset" id="btn_reset" value="Reset" class="btn"/>
</p>
</form>
<link rel="stylesheet" href="http://code.jquery.com/ui/1.10.3/themes/smoothness/jquery-ui.css" />
<script src="http://code.jquery.com/ui/1.10.3/jquery-ui.js"></script>
<script type="text/javascript">
$(document).ready(function() {
$("#date").datepicker({
yearRange: "1920:2013",
changeMonth: true,
changeYear: true
});
//get all id
var nom = $('#nom');
prenom = $('#prenom');
date = $('#date');
commune = $('#commune');
gsm = $('#gsm');
email = $('#email');
salarier = $('#salarier');
secteur = $('#secteur');
heure1 = $('#heure1');
heure2 = $('#heure2');
heure3 = $('#heure3');
revenu1 = $('#revenu1');
revenu2 = $('#revenu2');
revenu3 = $('#revenu3');
revenu4 = $('#revenu3');
vehicule1 = $('#vehicule1');
vehicule2 = $('#vehicule2');
affinite1 = $('#affinite1');
affinite2 = $('#affinite2');
rencontre1 = $('#rencontre1');
rencontre2 = $('#rencontre2');
//disable all fields bellow 'quel est votre staut actuellement'
secteur.attr('disabled', 'disabled');
heure1.attr('disabled', 'disabled');
heure2.attr('disabled', 'disabled');
heure3.attr('disabled', 'disabled');
revenu1.attr('disabled', 'disabled');
revenu2.attr('disabled', 'disabled');
revenu3.attr('disabled', 'disabled');
revenu4.attr('disabled', 'disabled');
vehicule1.attr('disabled', 'disabled');
vehicule2.attr('disabled', 'disabled');
affinite1.attr('disabled', 'disabled');
affinite2.attr('disabled', 'disabled');
rencontre1.attr('disabled', 'disabled');
rencontre2.attr('disabled', 'disabled');
//hide all fields bellow 'quel est votre staut actuellement'
$('.secteur').hide();
$('.heure').hide();
$('.revenu').hide();
$('.vehicule').hide();
$('.affinite').hide();
$('.rencontre').hide();
//show secteur
salarier.click(function() {
secteur.removeAttr('disabled');
heure1.removeAttr('disabled');
heure2.removeAttr('disabled');
heure3.removeAttr('disabled');
$('.secteur').show();
$('.heure').show();
});
//show revenu
heure2.click(function() {
revenu1.removeAttr('disabled');
revenu2.removeAttr('disabled');
revenu3.removeAttr('disabled');
revenu4.removeAttr('disabled');
$('.revenu').show();
});
//show vehicule
revenu4.click(function() {
vehicule1.removeAttr('disabled');
vehicule2.removeAttr('disabled');
$('.vehicule').show();
});
//show affinite
vehicule1.click(function() {
affinite1.removeAttr('disabled');
affinite2.removeAttr('disabled');
$('.affinite').show();
});
//show rencontre
affinite1.click(function() {
rencontre1.removeAttr('disabled');
rencontre2.removeAttr('disabled');
$('.rencontre').show();
});
//validate the form
$("#mycontact").validate({
errorPlacement: function(label, element) {
label.css('color', 'red');
label.insertAfter(element);
},
rules: {
"nom": {
"required": true,
"minlength": 3,
"maxlength": 30
},
"prenom": {
"required": true,
"minlength": 3,
"maxlength": 30
},
"date": {
"required": true,
"date": true
},
"commune": {
"required": true,
"maxlength": 255,
"minlength": 2
},
"gsm": {
"required": true,
"telRegex": /[0-9-()+]{8,20}/
},
"email": {
"required": true,
"email": true,
"maxlength": 255
},
"statut": {
"required": true
},
"secteur": {
"required": true
},
"affinite": {
"required": true
},
"rencontre": {
"required": true
}
}
});
//redifine messages
jQuery.extend(jQuery.validator.messages, {
required: "Ce champs est obligatoire",
remote: "votre message",
email: "Veuillez saisir une adresse email valide",
url: "Veuillez saisir un url valide",
date: "votre message",
dateISO: "votre message",
number: "Veuillez saisir un num tel",
digits: "votre message",
creditcard: "votre message",
equalTo: "votre message",
accept: "votre message",
maxlength: jQuery.validator.format("Ce champ doit avoir max {255} caractéres."),
minlength: jQuery.validator.format("Ce champ doit avoir min {2} caractéres."),
rangelength: jQuery.validator.format("votre message entre {0} et {1} caractéres."),
range: jQuery.validator.format("votre message entre {0} et {1}."),
max: jQuery.validator.format("votre message inférieur ou égal à {0}."),
min: jQuery.validator.format("votre message supérieur ou égal à {0}.")
});
//add Regex validation for GSM field
jQuery.validator.addMethod(
"telRegex",
function(value, element, regexp) {
if (regexp.constructor !== RegExp)
regexp = new RegExp(regexp);
else if (regexp.global)
regexp.lastIndex = 0;
return this.optional(element) || regexp.test(value);
}, "Veuillez entrer un numéro GSM valide"
);
});
</script>
brian teeman
Jul 14, 2013, 7:56:30 AM7/14/13
to joomla-de...@googlegroups.com
If I load your site with chrome inspector it shows JQuery is not defined on the validate script. Probably because it is being loaded before juery
please try swapping these two lines
$doc->addScript(JURI::root() . 'modules/mod_mycontact/js/jquery.validate.min.js');
$doc->addScript(JURI::root() . 'modules/mod_mycontact/js/jquery-xxxx.min.js');
Taieb BACCOUCH
Jul 14, 2013, 8:13:14 AM7/14/13
to joomla-de...@googlegroups.com
thank you so much for your help. it is working :)
Reply all
Reply to author
Forward
0 new messages