Comment vérifier l’âge avec jQuery?
Je dois valider si l’âge d’un site Web sur l’alcool. Et ce dont j’ai besoin, c’est tout ici. J’y suis presque mais je ne suis pas sûr que c’est correct. Localement ne fonctionne pas. J’ai besoin de la validation , des cookies , du champ et de la date de naissance
$(document).ready(function(){ //AV var container = $("#container"); var avContainer = $("#av-container"); var mcf = new mcFramework(container, avContainer); mcf.mcSetCallbackFunction(function() { document.cookie = "site=" + document.domain.replace(/\./, "") + "av; path=/"; if (window.location.href != 'page2.html') { window.location.href = 'page2.html'; } } ); function mcFramework(ContentContainer, AVContainer) { //global vars var _AVContent = 'You need to be of legal drinking age to continue.'; var _AVFailContent = 'You must be of legal drinking age (21 or older) to enter our site. You are being redirected to http://www.thecoolspot.gov/ - a place for teens to find info on alcohol and resisting peer pressure.'; var _ContentContainer = ContentContainer; var _AVContainer = AVContainer; var _CallbackFunction = ""; var _SiteCode = ""; // Set the tracking tag function which will fire on AV or AV Fail this.mcSetCallbackFunction = function(val) { _CallbackFunction = val }; this.mcSetSiteCode = function(val) { _SiteCode = val }; //add AV form to page avhtml = '' + '' + _AVContent + '' + '' + '' + '' + '' + '' + '
' + '' + '' + '' + '
' + 'submit' + ''; _AVContainer.append(avhtml); initForm(); function _AgeVerify(monthU, dayU, yearU) { var min_age = 21; /* change "age_form" to whatever your form has for a name="..." */ var year = parseInt(yearU); var month = parseInt(monthU) - 1; var day = parseInt(dayU); var theirDate = new Date((year + min_age), month, day); var today = new Date; if ( (today.getTime() - theirDate.getTime()) < 0) { _ShowAVFail(); } else { _SetAVCookie(); _ShowContent(); } } function _ShowAVFail(callback) { avfailhtml = '' + _AVFailContent + ''; $("#mc_avform").html(avfailhtml); setTimeout('document.location.href="http://www.thecoolspot.gov"', 5000); if (_AVFailTag) { _AVFailTag(); } } function _ShowContent() { _AVContainer.hide(); _ContentContainer.show(); _SetAVCookie(); if (_CallbackFunction) { _CallbackFunction(); } } function initForm() { // Add form event listners $("#submit").click(_AVFormSubmit); $("#mc_avform").keyup(_AVFormAutoTab); $("#mc_avday").keydown(clearField); $("#mc_avmonth").keydown(clearField); $("#mc_avyear").keydown(clearField); // Set focus on month field $("#mc_avmonth").focus(); $("#mc_avmonth").select(); } function clearField() { if ($(this).val() == "MM" || $(this).val() == "DD" || $(this).val() == "YYYY") { $(this).val(""); } } // Handle auto tabbing function _AVFormAutoTab(e) { var srcElem = (window.event) ? e.srcElement : e.target; var day = $("#mc_avday").val(); var month = $("#mc_avmonth").val(); var year = $("#mc_avyear").val(); if (e.keyCode == 13) { _AVFormSubmit(); } else { switch (srcElem.id) { case "mc_avday": if (day.match(/^[0-9]{2}$/)) { $("#mc_avyear").focus(); $("#mc_avyear").select(); } break; case "mc_avmonth": if (month.match(/^[0-9]{2}$/)) { $("#mc_avday").focus(); $("#mc_avday").select(); } break; // case "mc_avyear": // if (year.match(/^[0-9]{4}$/)) { // $("#mc_avzip").focus(); // $("#mc_avzip").select(); // } default: result = 'unknown'; } } } // Submit AV form function _AVFormSubmit() { if (_AVFormValidate()) { var day = $("#mc_avday").val(); var month = $("#mc_avmonth").val(); var year = $("#mc_avyear").val(); _AgeVerify(month, day, year); } } // ====================== // = AV Form Validation = // ====================== // Validate the AV form function _AVFormValidate() { var day = $("#mc_avday"); var month = $("#mc_avmonth"); var year = $("#mc_avyear"); error_day = 'Please enter a valid day.'; error_month = 'Please enter a valid month.'; error_year = 'Please enter a valid year.'; error_date = 'Please enter a valid date.'; var av_errors = $('#mc_averrors'); if (!(_isNumeric(day.val()))) { av_errors.text(error_day); day.focus(); return false; } if (!(_isNumeric(month.val()))) { av_errors.text(error_month); month.focus(); return false; } if (!(_isNumeric(year.val()))) { av_errors.text(error_year); year.focus(); return false; } if (year.val().length < 4) { av_errors.text(error_year); year.focus(); return false; } if (!_checkdate(month.val(), day.val(), year.val())) { av_errors.text(error_date); return false; } } // Check if a string is numeric function _isNumeric(str) { return /^\d+$/.test(str); } // Check if a string is a valid date function _checkdate(m, d, y) { var now = new Date(); // current date from clients system var yc = now.getYear(); // get current year if (yc < 2000) yc = yc + 1900; // in case the year is < 2000 var yl = yc - 120; // least year to consider var ym = yc; // most year to consider if (m 12) return (false); if (d 31) return (false); if (y ym) return (false); if (m == 4 || m == 6 || m == 9 || m == 11) if (d == 31) return (false); if (m == 2) { var b = parseInt(y / 4); if (isNaN(b)) return (false); if (d > 29) return (false); if (d == 29 && ((y / 4) != parseInt(y / 4))) return (false); } return (true); } } //Date helpers function checkleapyear(datea) { if (datea.getYear() % 4 == 0) { if (datea.getYear() % 10 != 0) { return true; } else { if (datea.getYear() % 400 == 0) return true; else return false; } } return false; } function DaysInMonth(Y, M) { with (new Date(Y, M, 1, 12)) { setDate(0); return getDate(); } } function datediff(date1, date2) { var y1 = date1.getFullYear(), m1 = date1.getMonth(), d1 = date1.getDate(), y2 = date2.getFullYear(), m2 = date2.getMonth(), d2 = date2.getDate(); if (d1 < d2) { m1--; d1 += DaysInMonth(y2, m2); } if (m1 < m2) { y1--; m1 += 12; } return [y1 - y2, m1 - m2, d1 - d2]; } function set_cookie(name, value, exp_d, path, domain, secure) { var cookie_string = name + "=" + escape(value); if (exp_d) { var exp = new Date(); //set new date object exp.setTime(exp.getTime() + (1000 * 60 * 60 * 24 * exp_d)); } if (path) cookie_string += "; path=" + escape(path); if (domain) cookie_string += "; domain=" + escape(domain); if (secure) cookie_string += "; secure"; document.cookie = cookie_string; } function SetBypassCookie(site) { var siteName = site + 'av'; //var zip = $("#mc_avzip").val(); set_cookie("site", siteName, 30, "/"); //set_cookie("zip", zip, 30, "/"); } }); - MS MVC forme les techniques AJAXifying
- Ouvrir Fancybox (ou équivalent) à partir du type d’entrée de formulaire = «submit»
- soumission de plusieurs formulaires avec AJAX
- Comment faire en sorte que Chrome se souvienne du mot de passe d’un formulaire AJAX?
- Comment append (cloner) des champs de formulaire à l’aide de jQuery et incrémenter les identifiants et les noms
- Validation de formulaire html5, action d’annulation de formulaire et exécution de jQuery lorsque tous les éléments de formulaire html5 sont validés?
- Désactiver le défilement lors de la modification d’éléments de formulaire de focus application web ipad
- Existe-t-il un moyen de cloner les valeurs de champs de formulaire dans jQuery ou javascript?
- la validation de plusieurs zones de texte de même nom avec jquery validator ne valide que la première entrée
$('.submit').click(function() {
devrait être
$('#submit').click(function() {
$ (“. submit”) se réfère à une classe et $ (“# submit”) à un identifiant.
et vous devrez append une logique pour vérifier si la case à cocher Remember est cochée. Je pense que vous avez tenté de le faire, mais que vous n’avez pas été en mesure de voir si elle a abouti car le code n’a jamais été exécuté. J’ai ajouté la logique pour vous (simple instruction if) et dans ce cadre, vous devez append le code de création de cookie.
if ($('#remember').is(":checked")) { $.cookie('age', age, { expires: 365 }); } else { $.cookie('age', age); }
(utilise https://github.com/carhartl/jquery-cookie )
Que diriez-vous de leur demander simplement: “Avez-vous au moins XX ans?” Demander une date de naissance n’est pas plus sûr. S’ils veulent mentir, ils entreront une mauvaise date de toute façon.
La validation via JavaScript est faillible. Que se passe-t-il si l’utilisateur désactive JavaScript? D’un sharepoint vue juridique, vous devriez probablement faire cela côté serveur. S’ils mentent à propos de leur âge, la responsabilité légale leur incombe probablement, mais si vous ne validez pas leur âge (car ils ont désactivé JavaScript), alors vous êtes en faute.
En ce qui concerne la pièce Age Validation, essayez ceci:
Pour la sauvegarde des cookies: https://github.com/carhartl/jquery-cookie
Obtenir la différence entre 2 dates en javascript?
// parse the users input into a date var date1 = new Date("7/11/2010"); //birthday // get today's date var date2 = new Date(); // legal age var age = 18; // get the difference in milliseconds since Epoch var timeDiff = Math.abs(date2.getTime() - date1.getTime()); // convert it to days var diffDays = Math.ceil(timeDiff / (1000 * 3600 * 24)); // there are 365.242199 days in a year * years, this is the minimum # of days old the person must be. return true or false if they are old enough. return (diffDays > (age * 365.242199));
Utilisez le plugin http://timeago.yarp.com .
laissez-les taper leur date de naissance et vous pourrez alors utiliser
jQuery.timeago("2008-07-17"); //=> "3 years ago"
si ce nombre> = 21 ils sont majeurs
pour le cookie, vous pouvez utiliser ce plugin https://github.com/carhartl/jquery-cookie
$.cookie('the_cookie', 'the_value'); //set cookie $.cookie('the_cookie'); // read cookie
SECOND EDIT: source complète http://jsfiddle.net/bhdry/
Eh bien, puisque vous allez avoir trois champs de saisie au lieu d’un, la tâche consiste simplement à appliquer le masque à trois zones de texte au lieu d’un, puis à construire l’argument pour l’ timeago méthode timeago . Le rest serait inchangé. Quelque chose comme ça:
$('input[name="DAY"]').mask("99"); $('input[name="MONTH"]').mask("99"); $('input[name="YEAR"]').mask("9999"); $('.deleteCookie').click(function() { $.cookie('age', null); }); $('.submit').click(function() { var enteredDOB = $('input[name="DAY"]').val() + "/" + $('input[name="MONTH"]').val() + "/" + $('input[name="YEAR"]').val(); var age = jQuery.timeago(enteredDOB); if (age === 'NaN years ago') { alert('DOB must be valid'); } else { $.cookie('age', age); if (parseInt(age, 10) >= 21) { alert('you\'re of age'); } else { alert('you\'re too young'); } } }); if (null !== $.cookie('age')) { alert('saved Cookie ' + $.cookie('age')); }
En ce qui concerne la fonctionnalité “Remember me”, il ne s’agit que de lire le cookie d’âge au chargement de la page et de redirect vers la page suivante si le cookie d’âge contient une valeur valide, même s’il s’agirait probablement d’une vérification mieux effectuée serveur- côté.
$('.submit').click(function() { devrait être $('#submit').click(function() {
bien qu’il y ait un code étrange que je ne comprends pas et provoque une erreur
$('input[type="checkbox"]:checked').length > 0();