Salut!
voilà le prof nous a demandé de faire en sorte que chaque champ du formulaire soit validé ou pas dès que l'utilisateur passe á un autre champ.
Voici ce que j'ai essaye de faire
je ne sais vraiment pas comment faire ce qu'il demande. Toute suggestion est la bienvenue.[/i]
Modifié par mimireine (21 Jan 2016 - 17:16)
voilà le prof nous a demandé de faire en sorte que chaque champ du formulaire soit validé ou pas dès que l'utilisateur passe á un autre champ.
Voici ce que j'ai essaye de faire
<!DOCTYPE HTML>
<html>
<head>
<title></title>
<style>
.second{
display: none;
z-index: 10000;
position: fixed;
top: 50px;
left: 50px;
background-color: azure;
width: 600px;
height: 600px;
padding: 5px;
border: 1px solid #000000;
-moz-box-shadow: 0 0 40px 5px #000000;
box-shadow: 0 0 40px 5px #000000;
-webkit-box-shadow: 0 0 40px 5px #000000;
}
.overlay-close {
background-image:url(picture.jpg);
position: absolute;
right: -15px;
top: -15px;
cursor: pointer;
height: 20px;
width: 20px;
}
body {
width: 500px;
}
.overlay {
color:indigo;
}
label {
margin-right: 5px;
}
.label-left {
text-align: right;
}
.label-right {
text-align: left;
}
.error {
color: îndigo;
}
</style>
<script src="library/jquery.js"></script>
<script>
/*3. When the user submits the form from the first two tasks,
use jQuery to perform suitable completeness and correctness checks
on each field (including checks for contradictory inputs). All form
fields are obligatory. Errors should be collected and the incorrect
fields should be highlighted and accompanied by an appropriate error message.
If all fields are complete and correct, ask the user to confirm the submission.
If the user cancels the submission, nothing should happen; otherwise, the submitted form fields and their
values should be listed in the main document (i.e. not in the overlay).*/
function myValidateEMailAddress(email_address) {
var email_pattern = /^([\w-\.]+@([\w-]+\.)+[\w-]{2,4})?$/;
return email_pattern.test(email_address);
}
function checkPassword(pwd_str) {
var my_pwd_pattern = /^(?=.*[a-zA-Z].*[a-zA-Z])(?=.*\d.*\d)[a-zA-Z0-9_]{6,20}$/;
return my_pwd_pattern.test(pwd_str);
}
function validatePhoneNumber(phone_number) {
var phone_pattern = /^(\(?\+?[0-9]*\)?)?[0-9_\- \(\)]*$/;
return phone_pattern.test(phone_number);
}
$(document).ready(function() {
$('a.overlay-link').click(function() {
var my_second_id = $($(this).attr('data-second-id'));
my_second_id.prepend('<div class="overlay-close"></div>').show();
$(document).on('click', '.overlay-close', function() {
my_second_id.hide();
});
});
$('#info').submit(function(e) {
var my_errors = false;
$('.overlay>.error').remove();
$('#result').empty();
// I do not think that I need to modify this code.
$(':text,:password,select, textarea').each(function() {
$(this).val($.trim($(this).val()));
if ($(this).val() == '') {
$(this).parent().append('<div class="error">Please provide a value</div>');
my_errors = true;
}
});
//i will change the code for email check
$('#email').on('blur', function() {
var emailVal = $(this).val();
if (!emailVal || !myValidateEMailAddress(emailVal)) { // if there is no value for the email or if it is incorrect by the time the user clicks outside the field...
$(this).parent().append('<div class="error">Please provide a correct e-mail address</div>');
my_errors = true;
}
});
$('#user_password').on('blur', function(){
var passValue= $(this).val();
if (!passValue ||!checkPassword(passValue)) {
$(this).parent().append('<div class="error">Please provide a correct password.</div>');
my_errors = true;
}
});
/*for the phone numbers*/
$('#number').on('blur', function() {
var numberValue = $(this).val();
if(!numberValue || !validatePhoneNumber(numberValue)){
$(this).parent().append('<div class="error">Please provide a correct phone number.</div>');
my_errors = true;
}
});
/*for all checked radio buttons*/
$("input:checked").on('blur', function(){
var radioLength= $(this).length;
if(radioLength == 0){
$(this).first().parent().after('<div class="error">Please select one item</div>');
my_errors = true;
}
});
if (my_errors) { // if there is any mistake then the form should not be submitted.
return false;
}
else {
e.preventDefault();
var array = $('#info').serialize().split('&');
if (array.length > 0) {
$('#result').html('<h2>Submitted Elements</h2><ul></ul>');
for (var i = 0; i < array.length; i++) {
var my_pair = array[i].split('=');
$('#result> ul').append('<li>' + my_pair[0] + ': ' + my_pair[1] + '</li>\n');
}
}
}
});
});
</script>
</head>
<body>
<div id="overlay1" class="second">
<form name ="info" id="info" action="" method= "post">
<div class="overlay">
<label for="appelation" class="label-left">Choose the correct appelation</label>
<select name="appelation" id="appelation">
<option value="">Please select one</option>
<option value="Mr.">Mr.</option>
<option value="Madam">Madam</option>
<option value="Miss">Miss</option>
<option value="Dr">Dr</option>
<option value="Pr">Pr</option>
<option value="Ms.">Ms.</option>
</select>
</div>
<div class="overlay">
<fieldset>
<legend>Sex:</legend>
<input type="radio" name="sex" id="group1" value="Male">
<label for="group1" class="label-right">Male</label>
<input type="radio" name="sex" id="group2" value="Female">
<label for="group2" class="label-right">Female</label>
</fieldset>
</div>
<div class="overlay">
<label for="last_name"class="label-left">Last name:</label>
<input type="text" name="last_name" id="last_name" size="30" maxlength="80">
</div>
<div class="overlay">
<label for="first_name"class="label-left">First name:</label>
<input type="text" name="first_name" id="first_name" size="30" maxlength="80">
</div>
<div class="overlay">
<label for="email"class="label-left">E-Mail Address:</label>
<input type="text" name="email" id="email" size="30" maxlength="80"><!-- type="email" because it buys free validation from browsers that support HTML5 even if JavaScript is turned off-->
</div>
<div class="overlay">
<label for="user_password"class="label-left">Password:</label>
<input type="password" name="user_password" id="user_password" size="10" maxlength="20">
</div>
<div class="overlay">
<label for="number"class="label-left">Phone number:</label>
<input type="text" name="number" id="number" size="10" maxlength="20">
</div>
<div class="overlay">
<label for="likes" class="label-left">What are your likes?</label>
<select name="likes" id="likes">
<option value="">Please select one</option>
<option value="Computers">Programming</option>
<option value="Literature"> African literature</option>
<option value="spleen">Poetry</option>
<option value="shake">Dancing</option>
</select>
</div>
<div class="overlay">
<fieldset>
<legend>Do you want to receive our newsletter ?</legend>
<input type="radio" name="subscription" id="group1" value="Yes">
<label for="group1" class="label-right">Yes</label>
<input type="radio" name="letter" id="group2" value="No">
<label for="group2" class="label-right">No</label>
</fieldset>
</div>
<div class="overlay">
<label for="user_comments" class="label-left">Write some comments below:</label>
<p>
<textarea name="user_comments" id="user_comments" cols="40" rows="3"></textarea>
</p>
</div>
<div class="overlay">
<input type="submit" name="submit_button" id="submit_button" value="Submit">
</div>
<div id="result"></div><!--this is to output the informations that were collected from the form-->
</form>
</div><a href="#" data-second-id="#overlay1" class="overlay-link">Show Overlay</a>
</body>
</html>
je ne sais vraiment pas comment faire ce qu'il demande. Toute suggestion est la bienvenue.[/i]
Modifié par mimireine (21 Jan 2016 - 17:16)