// URLs images
var female_img = "https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcSo8PcCxh7tT6MDFhJi2UaAT9SeciHqvZuaWtGg0y0-yyP8rMDz";
var male_img = "https://visualpharm.com/assets/217/Life%20Cycle-595b40b75ba036ed117d9ef0.svg";
// On page loaded
$( document ).ready(function() {
// Set the sex image
set_sex_img();
// Set the "who" message
set_who_message();
// On change sex input
$("#input_sex").change(function() {
// Set the sex image
set_sex_img();
set_who_message();
});
// On change fist name input
$("#first_name").keyup(function() {
// Set the "who" message
set_who_message();
if(validation_name($("#first_name").val()).code == 0) {
$("#first_name").attr("class", "form-control is-invalid");
$("#first_name_feedback").html(validation_name($("#first_name").val()).message);
} else {
$("#first_name").attr("class", "form-control");
}
});
// On change last name input
$("#last_name").keyup(function() {
// Set the "who" message
set_who_message();
if(validation_name($("#last_name").val()).code == 0) {
$("#last_name").attr("class", "form-control is-invalid");
$("#last_name_feedback").html(validation_name($("#last_name").val()).message);
} else {
$("#last_name").attr("class", "form-control");
}
});
});
/**
* Set image path (Mr. or Ms.)
*/
function set_sex_img() {
var sex = $("#input_sex").val();
if (sex == "Mr.") {
// male
$("#img_sex").attr("src", male_img);
} else {
// female
$("#img_sex").attr("src", female_img);
}
}
/**
* Set "who" message
*/
function set_who_message() {
var sex = $("#input_sex").val();
var first_name = $("#first_name").val();
var last_name = $("#last_name").val();
if (validation_name(first_name).code == 0 ||
validation_name(last_name).code == 0) {
// Informations not completed
$("#who_message").html("Who are you ?");
} else {
// Informations completed
$("#who_message").html(sex+" "+first_name+" "+last_name);
}
}
/**
* Validation function for last name and first name
*/
function validation_name (val) {
if (val.length < 2) {
// is not valid : name length
return {"code":0, "message":"The name is too short."};
}
if (!val.match("^[a-zA-Z\- ]+$")) {
// is not valid : bad character
return {"code":0, "message":"The name use non-alphabetics chars."};
}
// is valid
return {"code": 1};
}
