السلام عليكم ورحمة الله وبركاته
أريد ان أعرف كيفية التحقق من مدخلات الخانات في jquery
مثلا
الاسم
اللقب
الايمايل
السلام عليكم ورحمة الله وبركاته
أريد ان أعرف كيفية التحقق من مدخلات الخانات في jquery
مثلا
الاسم
اللقب
الايمايل
هناك إضافة جيدة في Jquery
jquery.validate يمكنك تحميلها أو تضمينها في السكربت من هنا
تقوم بمهمة التحقق من خانات النماذج بشكل دقيق .. وسهلة الإستخدام .
يمكنك فقط أن تعطي الأداة أنها تابعة لكلاس معين مثال :::
class="required"
أو للإيميل
class="required email"
أو كرابط
class="url"
وإليك سرد لهذا المثال البسيط كما هو من jquery.com
<html>
<head>
<script src="http://code.jquery.com/jquery-latest.js"></script>
<script type="text/javascript" src="http://jzaefferer.github.com/jquery-validation/jquery.validate.js"></script>
<style type="text/css">
* { font-family: Verdana; font-size: 96%; }
label { width: 10em; float: left; }
label.error { float: none; color: red; padding-left: .5em; vertical-align: top; }
p { clear: both; }
.submit { margin-left: 12em; }
em { font-weight: bold; padding-right: 1em; vertical-align: top; }
</style>
<script>
$(document).ready(function(){
$("#commentForm").validate();
});
</script>
</head>
<body>
<form class="cmxform" id="commentForm" method="get" action="">
<fieldset>
<legend>A simple comment form with submit validation and default messages</legend>
<p>
<label for="cname">Name</label>
<em>*</em><input id="cname" name="name" size="25" class="required" minlength="2" />
</p>
<p>
<label for="cemail">E-Mail</label>
<em>*</em><input id="cemail" name="email" size="25" class="required email" />
</p>
<p>
<label for="curl">URL</label>
<em> </em><input id="curl" name="url" size="25" class="url" value="" />
</p>
<p>
<label for="ccomment">Your comment</label>
<em>*</em><textarea id="ccomment" name="comment" cols="22" class="required"></textarea>
</p>
<p>
<input class="submit" type="submit" value="Submit"/>
</p>
</fieldset>
</form>
</body>
</html>هذا المثال كافي لإجراء عمليات التحقق الأساسية
لكن إذا كان لديك المزيد من الوقت يمكنك التعرف على الإضافة من هنا
تم تعديل هذه المشاركة بواسطة موفق جمال زكريا في 16 مايو 2012 في 14:21
بارك الله فيك يا أخي
كيف استطيع التحكم في الرسائل التي تخرج عند ترك الخانة فارغة
مثلا
اكتب الاسم من فضلك
اكتب الايمايل من فضلك
تم تعديل هذه المشاركة بواسطة hicham@com في 16 مايو 2012 في 21:44
ستجد ضمن الملف jquery.validate.js
كل الجمل التي تريد .. يمكنك تعريبها بكل سهولة
messages: {
required: "This field is required.",
remote: "Please fix this field.",
email: "Please enter a valid email address.",
url: "Please enter a valid URL.",
date: "Please enter a valid date.",
dateISO: "Please enter a valid date (ISO).",
number: "Please enter a valid number.",
digits: "Please enter only digits.",
creditcard: "Please enter a valid credit card number.",
equalTo: "Please enter the same value again.",
accept: "Please enter a value with a valid extension.",
maxlength: $.validator.format("Please enter no more than {0} characters."),
minlength: $.validator.format("Please enter at least {0} characters."),
rangelength: $.validator.format("Please enter a value between {0} and {1} characters long."),
range: $.validator.format("Please enter a value between {0} and {1}."),
max: $.validator.format("Please enter a value less than or equal to {0}."),
min: $.validator.format("Please enter a value greater than or equal to {0}.")
},شكرا لك اخي
اخي هل يوجد ضمن الملف jquery.validate.js
خاصية استطيع من خلالها عند ادخال المستخدم
في خانة الاسم مثلا أدخل أرقام
تخرج له رسالة
<div id="cont">
<h3>Omra sur mesure </h3>
<div id="Omra_m">Veuillez prendre quelques instants pour remplir notre formulaire. <br>Ces informations nous permettront de mieux vous servir et de répondre à votre demande dans les meilleurs délais et conditions. <br>Votre
demande sera transmise immédiatement à toutes nos agences partenaires
qui vous contacteront dans les plus brefs délais avec des propositions
qui répondront inchallah à vos attentes.</div>
<!--<div id="b">??? ???? ?????? ?????? </div>-->
<form class="cmxform" id="commentForm" method="post" action="">
<fieldset>
<legend>Mes informations</legend>
<p>
<label for="cname">Nom * </label>
<input id="cname" name="name" size="30" class="required" minlength="2" />
</p>
<p>
<label for="cPrnom ">Prénom * </label>
<input id="cPrnom" name="Prnom" size="30" class="required" minlength="2" />
</p>
<p>
<label for="cAdresse">Adresse </label>
<input id="cadresse" name="adresse" size="30" class="required" minlength="2" />
</p>
<p>
<label for="ccodepostal ">Code postal </label>
<input id="code_postal" name="code_postal " size="30" class="required" minlength="2" />
</p>
<p>
<label for="cVille ">Ville * </label>
<input id="cville" name="ville" size="30" class="required" minlength="2" />
</p>
<p>
<label for="cTéléphone">Téléphone * </label>
<input id="ctéléphone" name="téléphone" size="30" class="required" minlength="2" />
</p>
<p>
<label for="cemail">E-Mail *</label>
<input id="cemail" name="email" size="30" class="required email" /> </br>
<div id="conf"> Très important: Veuillez entrer votre adresse email pour </br>
recevoir le lien de confirmation de votre demande.</div>
</p>
</fieldset>
<fieldset>
<legend>Pays/Ville de départ</legend>
<p>
<label for="référence"> Préférence 1 *</label>
<select id="selc">
<option>Algérie</option>
<option>Arabie saoudite</option>
<option>Tunisie</option>
<option>Yémen</option>
<option>Egypte</option>
</p>
</select>
</fieldset>
<fieldset>
<legend>Départ en groupe</legend>
<p>
<select>
<option>Obligatoire</option>
<option>Souhaitable</option>
</select>
</p>
</fieldset>
<fieldset>
<legend>Date de départ * </legend>
<div class="tbl_col2"><select name="jour_depart" class="dt_ob" id="jour_depart" style="width:60px !important;"><option selected="selected" value=""> --</option><option value="1">1</option><option value="2">2</option><option value="3">3</option><option value="4">4</option><option value="5">5</option><option value="6">6</option><option value="7">7</option><option value="8">8</option><option value="9">9</option><option value="10">10</option><option value="11">11</option><option value="12">12</option><option value="13">13</option><option value="14">14</option><option value="15">15</option><option value="16">16</option><option value="17">17</option><option value="18">18</option><option value="19">19</option><option value="20">20</option><option value="21">21</option><option value="22">22</option><option value="23">23</option><option value="24">24</option><option value="25">25</option><option value="26">26</option><option value="27">27</option><option value="28">28</option><option value="29">29</option><option value="30">30</option><option value="31">31</option></select> <select name="mois_depart" class="dt_ob" id="mois_depart" style="width:110px !important;"><option selected="selected" value=""> --</option><option value="2">Février</option><option value="3">Mars</option><option value="4">Avril</option><option value="5">Mai</option><option value="6">Juin</option><option value="7">Juillet</option><option value="8">Août</option><option value="9">Septembre</option></select><select name="annee_depart" class="dt_ob" id="annee_depart" style="width:60px !important;"><option selected="selected" value=""> --</option><option value="2012">2012</option></select></div>
</p>
</fieldset>
<fieldset>
<legend>Mon séjour à la Mecque </legend>
Nombre de nuits à la Mecque
<select name="sejour_mecque" id="sejour_mecque" onchange="chekSEJOUR();">
<option selected="selected" value="">--</option>
<option value="1">1 nuit</option>
<option value="2">2 Nuits</option>
<option value="3">3 Nuits</option>
<option value="4">4 Nuits</option>
<option value="5">5 Nuits</option>
<option value="6">6 Nuits</option>
<option value="7">7 Nuits</option>
<option value="8">8 Nuits</option>
<option value="9">9 Nuits</option>
<option value="10">10 Nuits</option>
<option value="11">11 Nuits</option>
<option value="12">12 Nuits</option>
<option value="13">13 Nuits</option>
<option value="14">14 Nuits</option>
<option value="15">15 Nuits</option>
<option value="16">16 Nuits</option>
<option value="17">17 Nuits</option>
<option value="18">18 Nuits</option>
<option value="19">19 Nuits</option>
<option value="20">20 Nuits</option>
<option value="21">21 Nuits</option>
<option value="22">22 Nuits</option>
<option value="23">23 Nuits</option>
<option value="24">24 Nuits</option>
<option value="25">25 Nuits</option>
<option value="26">26 Nuits</option>
<option value="27">27 Nuits</option>
<option value="28">28 Nuits</option>
<option value="29">29 Nuits</option>
<option value="30">30 Nuits</option>
<option value="31">31 Nuits</option>
</select></br>
Distance maximale du Haram
<select name="distance_medine"><option selected="selected" value="Pas important">Pas important</option><option value="Moins de 200 mètres">Moins de 200 mètres</option><option value="Moins de 1000 mètres">Moins de 1000 mètres</option><option value="De 1 à 5 km">De 1 à 5 km</option><option value="Plus que 5 km">Plus que 5 km</option></select>
</br>
Classification d'hôtel
<select name="type_hotel_medine" id="type_hotel_medine" onchange="get_hotel_by_stars(this.value,717,'span_hotel_medine','hotel_medine');"><option value="0" selected="selected">Indifférent </option><option value="1">1 étoile</option><option value="2">2 étoiles</option><option value="3">3 étoiles</option><option value="4">4 étoiles</option><option value="5">5 étoiles</option></select>
</br>
Hôtel à la Mecque
<select class="" name="hotel_medine" id="hotel_medine"><option selected="selected" value="">Choisir hôtel</option><option value="1544">Al Ansar Silver Hotel </option><option value="2093">Al Khozama Madinah </option><option value="2030">AL MADINA CROM </option><option value="1552">Al Manara Crom </option><option value="2075">Al Muna Kareem </option><option value="59">Al Saha </option><option value="121">Al-Hijaz (Duais Group) </option><option value="96">Al-Ishraq </option><option value="305">Al-Madinah Manazili </option><option value="1904">Alalya Hotel </option><option value="64">Amjad Al-Ghurra </option><option value="574">Amjad Al-Salam </option><option value="1355">Andalous Dar Al Salam </option><option value="1460">Andalus Classy Suites </option><option value="55">Andalus Dar Alkhair </option><option value="93">Andalus Plaza </option><option value="526">Ansar Diamond </option><option value="531">Ansar Golden hôtel </option><option value="761">Ansar New Palace ( Al Ansar Silver Hotel) </option><option value="2055">Anwar Al Madinah Moevenpick </option><option value="638">Aramas Madinah </option><option value="126">Areej Al-Wafa </option><option value="1345">Arees Al Salam </option><option value="2157">Asawar / Zomord Kartaj Hotel </option><option value="1116">Bader Al Mohamaedia </option><option value="100">Bahauddin </option><option value="127">Baiti </option><option value="204">Barakat al-andalus </option><option value="101">Dallah Taibah </option><option value="653">Dallah Taibah, Médine </option><option value="105">Dar al Iman (Intcl.) </option><option value="2176">Dar Al Iman InterContinental </option><option value="1466">Dar Al Madinah </option><option value="1949">Dar Al Naeem Médine </option><option value="102">Dar Al-Hijra (Intcl.) </option><option value="103">Dar Al-Safa </option><option value="129">Dar Al-Salam </option><option value="104">Dar Al-Taqwa </option><option value="191">Diyar international hôtel </option><option value="2082">Diyar Marmara </option><option value="56">Durrat Al Andalus </option><option value="1320">Dyar Al Habib </option><option value="2145">Dyar al Houda </option><option value="1553">Dyar Taiba </option><option value="68">Elaf Al Huda </option><option value="575">Elaf group </option><option value="106">Elaf Taiba </option><option value="1523">Golden Wasal </option><option value="560">GROUPE MUBARAK </option><option value="61">Haram </option><option value="213">Harithyah </option><option value="215">Harmony </option><option value="1382">Hayatt Regency International Madinah </option><option value="156">Hijaz Golden Palace </option><option value="107">Hilton Madinah </option><option value="192">Iman Taiba </option><option value="200">Ishraq Al Madinah </option><option value="571">Jaouharat Elyes </option><option value="108">Jauharah Mubarak </option><option value="2205">Jawharat Al Fayrouz Hotel </option><option value="637">Jawharet Arrachid </option><option value="2151">Lo'oloat Al Makarem </option><option value="753">lo'oloat mubarek </option><option value="1384">Madinah Concorde </option><option value="97">Madinah Kareem </option><option value="98">Madinah Manazili </option><option value="193">Madinah Moevenpick </option><option value="1546">Madinah Residential Centre </option><option value="37">Majd Al Madina </option><option value="565">Majd Season </option><option value="1404">Majeedi Arac Suites </option><option value="201">Makarem Al Madinah </option><option value="570">MAKAREM AL MADINAH </option><option value="2104">Makarem Al Massy </option><option value="2035">Manazel Al Amal </option><option value="109">Manazil Al Haram Hotel Group </option><option value="1372">Markaz Almadinah </option><option value="177">Marriott Hotel </option><option value="1294">Marsa Palace </option><option value="2164">Mawaddah Al Noor </option><option value="167">Mawaddah Al Safwa </option><option value="2059">Mawaddah Al Waha </option><option value="657">Mirage Al Chark </option><option value="2214">Mokhtar al Alami </option><option value="1170">Moubarek Al Massy </option><option value="2014">Moubarek Silver </option><option value="2193">Mubarak Al-Madinah </option><option value="110">Mubarak Al-Salam </option><option value="111">Mubarak Golden </option><option value="112">Mubarak Plaza </option><option value="123">Murjan / Coral </option><option value="113">Oberoi Hotel Madinah </option><option value="1474">Radisson Blu Al Muna Kareem </option><option value="566">Rahma </option><option value="665">Ramada Madinah Al Hamra </option><option value="114">Rawdah Mubarak </option><option value="2209">Rawdat Al Safwah </option><option value="1537">Rayhanat Mubarak </option><option value="124">Rehab (Duais Group) </option><option value="2051">Royal Amjad Assalam </option><option value="115">Royal Classy Suites </option><option value="1147">Royal Dyar </option><option value="2077">Royal Dyar Hotel </option><option value="116">Safir Al-Saha </option><option value="603">Safir Al-Saha </option><option value="556">Sedef Tayyibe </option><option value="1448">Shaza Al Madina </option><option value="568">Shorfa </option><option value="830">Soufara Al houda </option><option value="1405">Taiba Arac Suites </option><option value="117">Taibah Res. Suites </option><option value="2206">waha Al rawdah </option><option value="118">wardet Mubarak </option><option value="1516">Wassel Kindah </option><option value="649">Wassl Golden </option><option value="2087">Wissam </option><option value="1580">Zahrat al Madinah </option></select>
</br>
Pension
<select name="pension_hotel_medine" id="pension_hotel_medine"><option selected="selected" value="Aucune">Aucune</option><option value="Complète">Complète</option><option value="Demi pension">Demi pension</option><option value="Petit déjeuner">Petit déjeuner</option></select>
</br>
Partage de chambre à la Mecque
<select name="partage_chambre_medine" id="partage_chambre_medine"><option value="indifférent" selected="selected">Indifférent</option><option value="Penta">Penta</option><option value="Quadruple">Quadruple</option><option value="Triple">Triple</option><option value="Double">Double</option><option value="Particulière">Particulière</option></select>
</div>
</fieldset>
<!--***************************************************************************************************-->
<fieldset>
<legend>Mon séjour à la Médine </legend>
Nombre de nuits à la Médine
<select name="sejour_Médine " id="sejour_Médine " onchange="chekSEJOUR();">
<option selected="selected" value="">--</option>
<option value="1">1 nuit</option>
<option value="2">2 Nuits</option>
<option value="3">3 Nuits</option>
<option value="4">4 Nuits</option>
<option value="5">5 Nuits</option>
<option value="6">6 Nuits</option>
<option value="7">7 Nuits</option>
<option value="8">8 Nuits</option>
<option value="9">9 Nuits</option>
<option value="10">10 Nuits</option>
<option value="11">11 Nuits</option>
<option value="12">12 Nuits</option>
<option value="13">13 Nuits</option>
<option value="14">14 Nuits</option>
<option value="15">15 Nuits</option>
<option value="16">16 Nuits</option>
<option value="17">17 Nuits</option>
<option value="18">18 Nuits</option>
<option value="19">19 Nuits</option>
<option value="20">20 Nuits</option>
<option value="21">21 Nuits</option>
<option value="22">22 Nuits</option>
<option value="23">23 Nuits</option>
<option value="24">24 Nuits</option>
<option value="25">25 Nuits</option>
<option value="26">26 Nuits</option>
<option value="27">27 Nuits</option>
<option value="28">28 Nuits</option>
<option value="29">29 Nuits</option>
<option value="30">30 Nuits</option>
<option value="31">31 Nuits</option>
</select></br>
Distance maximale du Masjid Nabaoui
<select name="distance_medine"><option selected="selected" value="Pas important">Pas important</option><option value="Moins de 200 mètres">Moins de 200 mètres</option><option value="Moins de 1000 mètres">Moins de 1000 mètres</option><option value="De 1 à 5 km">De 1 à 5 km</option><option value="Plus que 5 km">Plus que 5 km</option></select>
</br>
Classification d'hôtel
<select name="type_hotel_medine" id="type_hotel_medine" onchange="get_hotel_by_stars(this.value,717,'span_hotel_medine','hotel_medine');"><option value="0" selected="selected">Indifférent </option><option value="1">1 étoile</option><option value="2">2 étoiles</option><option value="3">3 étoiles</option><option value="4">4 étoiles</option><option value="5">5 étoiles</option></select>
</br>
Hôtel à la Médine
<select class="" name="hotel_medine" id="hotel_medine"><option selected="selected" value="">Choisir hôtel</option><option value="1544">Al Ansar Silver Hotel </option><option value="2093">Al Khozama Madinah </option><option value="2030">AL MADINA CROM </option><option value="1552">Al Manara Crom </option><option value="2075">Al Muna Kareem </option><option value="59">Al Saha </option><option value="121">Al-Hijaz (Duais Group) </option><option value="96">Al-Ishraq </option><option value="305">Al-Madinah Manazili </option><option value="1904">Alalya Hotel </option><option value="64">Amjad Al-Ghurra </option><option value="574">Amjad Al-Salam </option><option value="1355">Andalous Dar Al Salam </option><option value="1460">Andalus Classy Suites </option><option value="55">Andalus Dar Alkhair </option><option value="93">Andalus Plaza </option><option value="526">Ansar Diamond </option><option value="531">Ansar Golden hôtel </option><option value="761">Ansar New Palace ( Al Ansar Silver Hotel) </option><option value="2055">Anwar Al Madinah Moevenpick </option><option value="638">Aramas Madinah </option><option value="126">Areej Al-Wafa </option><option value="1345">Arees Al Salam </option><option value="2157">Asawar / Zomord Kartaj Hotel </option><option value="1116">Bader Al Mohamaedia </option><option value="100">Bahauddin </option><option value="127">Baiti </option><option value="204">Barakat al-andalus </option><option value="101">Dallah Taibah </option><option value="653">Dallah Taibah, Médine </option><option value="105">Dar al Iman (Intcl.) </option><option value="2176">Dar Al Iman InterContinental </option><option value="1466">Dar Al Madinah </option><option value="1949">Dar Al Naeem Médine </option><option value="102">Dar Al-Hijra (Intcl.) </option><option value="103">Dar Al-Safa </option><option value="129">Dar Al-Salam </option><option value="104">Dar Al-Taqwa </option><option value="191">Diyar international hôtel </option><option value="2082">Diyar Marmara </option><option value="56">Durrat Al Andalus </option><option value="1320">Dyar Al Habib </option><option value="2145">Dyar al Houda </option><option value="1553">Dyar Taiba </option><option value="68">Elaf Al Huda </option><option value="575">Elaf group </option><option value="106">Elaf Taiba </option><option value="1523">Golden Wasal </option><option value="560">GROUPE MUBARAK </option><option value="61">Haram </option><option value="213">Harithyah </option><option value="215">Harmony </option><option value="1382">Hayatt Regency International Madinah </option><option value="156">Hijaz Golden Palace </option><option value="107">Hilton Madinah </option><option value="192">Iman Taiba </option><option value="200">Ishraq Al Madinah </option><option value="571">Jaouharat Elyes </option><option value="108">Jauharah Mubarak </option><option value="2205">Jawharat Al Fayrouz Hotel </option><option value="637">Jawharet Arrachid </option><option value="2151">Lo'oloat Al Makarem </option><option value="753">lo'oloat mubarek </option><option value="1384">Madinah Concorde </option><option value="97">Madinah Kareem </option><option value="98">Madinah Manazili </option><option value="193">Madinah Moevenpick </option><option value="1546">Madinah Residential Centre </option><option value="37">Majd Al Madina </option><option value="565">Majd Season </option><option value="1404">Majeedi Arac Suites </option><option value="201">Makarem Al Madinah </option><option value="570">MAKAREM AL MADINAH </option><option value="2104">Makarem Al Massy </option><option value="2035">Manazel Al Amal </option><option value="109">Manazil Al Haram Hotel Group </option><option value="1372">Markaz Almadinah </option><option value="177">Marriott Hotel </option><option value="1294">Marsa Palace </option><option value="2164">Mawaddah Al Noor </option><option value="167">Mawaddah Al Safwa </option><option value="2059">Mawaddah Al Waha </option><option value="657">Mirage Al Chark </option><option value="2214">Mokhtar al Alami </option><option value="1170">Moubarek Al Massy </option><option value="2014">Moubarek Silver </option><option value="2193">Mubarak Al-Madinah </option><option value="110">Mubarak Al-Salam </option><option value="111">Mubarak Golden </option><option value="112">Mubarak Plaza </option><option value="123">Murjan / Coral </option><option value="113">Oberoi Hotel Madinah </option><option value="1474">Radisson Blu Al Muna Kareem </option><option value="566">Rahma </option><option value="665">Ramada Madinah Al Hamra </option><option value="114">Rawdah Mubarak </option><option value="2209">Rawdat Al Safwah </option><option value="1537">Rayhanat Mubarak </option><option value="124">Rehab (Duais Group) </option><option value="2051">Royal Amjad Assalam </option><option value="115">Royal Classy Suites </option><option value="1147">Royal Dyar </option><option value="2077">Royal Dyar Hotel </option><option value="116">Safir Al-Saha </option><option value="603">Safir Al-Saha </option><option value="556">Sedef Tayyibe </option><option value="1448">Shaza Al Madina </option><option value="568">Shorfa </option><option value="830">Soufara Al houda </option><option value="1405">Taiba Arac Suites </option><option value="117">Taibah Res. Suites </option><option value="2206">waha Al rawdah </option><option value="118">wardet Mubarak </option><option value="1516">Wassel Kindah </option><option value="649">Wassl Golden </option><option value="2087">Wissam </option><option value="1580">Zahrat al Madinah </option></select>
</br>
Pension
<select name="pension_hotel_medine" id="pension_hotel_medine"><option selected="selected" value="Aucune">Aucune</option><option value="Complète">Complète</option><option value="Demi pension">Demi pension</option><option value="Petit déjeuner">Petit déjeuner</option></select>
</br>
Partage de chambre à la Mecque
<select name="partage_chambre_medine" id="partage_chambre_medine"><option value="indifférent" selected="selected">Indifférent</option><option value="Penta">Penta</option><option value="Quadruple">Quadruple</option><option value="Triple">Triple</option><option value="Double">Double</option><option value="Particulière">Particulière</option></select>
</div>
</fieldset>
<p>
<input class="submit" type="submit" value="Submit"/>
</p>
</form>
</div>
</div>
</body>
</html>هذا الكود الذي أريد عمل له تحقق للمدخلات من جميع النواحي
اقتباساخي هل يوجد ضمن الملف jquery.validate.jsخاصية استطيع من خلالها عند ادخال المستخدم
في خانة الاسم مثلا أدخل أرقام
تخرج له رسالة
نعم أخي الكريم يمكنك استخدام required digits حتى لايقبل في الخانة أرقام
======================
وهذه الحقول التي يدعمها
required عندما يكون الحقل مطلوب بغض النظر عما يدخل
email صيغة الإيميل
url لموقع إنترنت أو لينك
date تاريخ
number رقم
digits للأحرف
creditcard رقم بطاقة ائتمان
equalTo لإجبار المستخدم ادخل قيمة معينة حصراً
maxlength لتحديد الطول الأقصى الذي تسمح للمستخدم بإدخاله
minlength نفس التي في الأعلى لكن لأقل عدد أحرف ممكن
range لإجبار المستخدم أدخال قيمة بين مجال معين
max و min أيضاً لتحديد القيمة الأقل والأكثر ( خاصة بالأرقام )
طبعاً أخي لاتنسى أنه يمكنك الدمج بين القيم
يعني يمكن أن يكون الحقل مطلوب و القيمة العظمى له 20 حرف .....الخ
إذا احتجت المزيد من امكانيات التحكم
يمكن تطوير الفانكشن وتعديله ، أو اللجوء إلى فانكشن خاصة باستخدام regular expressions .... من هنا
تم تعديل هذه المشاركة بواسطة موفق جمال زكريا في 18 مايو 2012 في 13:41
شكرا لك أخي على الاستجابة
أخي لقد قمت بعمل لكل خانة messages خاص بها لكن أخي كيف استطيع أن زيادة خاصية مثلا للاسم أن لا يدخل الا الحروف والهاتف أن يدخل رمز الدولة
إلى آخره
:) :)
<script>
$(document).ready(function(){
$("#commentForm").validate({
rules: {
prenom:"required",
adresse:"required",
ville:"required",
Code_postal:"required",
téléphone:"required",
name: {
required: true,
minlength: 2
},
email: {
required: true,
email: true
},
agree: "required"
},
messages: {
prenom: "Please enter a prenom",
adresse:"Please enter a adresse",
Code_postal:"Please enter a Code postal",
ville:"Please enter a vill",
téléphone:"Please enter a téléphone",
name: {
required: "Please enter a username",
minlength: "Your username must consist of at least 2 characters"
},
email: "Please enter a valid email address",
agree: "Please accept our policy"
}
});
});
</script>
</head>
<body>
<form class="cmxform" id="commentForm" method="get" action="">
<fieldset>
<legend>A simple comment form with submit validation and default messages</legend>
<p>
<label for="cname">Name</label>
<em>*</em><input id="cname" name="name" size="25" class="required" minlength="2" />
</p>
<p>
<label for="cprenom">Prenom</label>
<em>*</em><input id="cprenom" name="prenom" size="25" class="required" minlength="2" />
</p>
<p>
<label for="cAdresse">Adresse</label>
<em>*</em><input id="cadresse" name="adresse" size="25" class="required" minlength="2" />
</p>
<p>
<label for="cCode_postal">Code postal</label>
<em>*</em><input id="cCode_postal" name="Code_postal" size="25" class="required" minlength="2" />
</p>
<p>
<label for="cTéléphone">Téléphone</label>
<em>*</em><input id="ctéléphone" name="téléphone" size="25" class="required" maxlength ="2" />
</p>
<p>
<label for="cville">Ville</label>
<em>*</em><input id="cVille" name="ville" size="25" class="required" minlength="2" />
</p>
<p>
<label for="cemail">E-Mail</label>
<em>*</em><input id="cemail" name="email" size="25" class="required email" />
</p>
<p>
<input class="submit" type="submit" value="Submit"/>
</p>
</fieldset>
</form>
</body>
</html>المتواجدون خلال آخر دقيقتين · يتحدّث كل ٣٠ ثانية
جارٍ التحقق من المتواجدين…