Есть форма содержащая:
3 текстовых поля: фамилия, имя / фамилия, отчество
текстовые поля: e-mail, password
флажки производители
группы переключателей цвета оттенки 2 объекта Select: группа товара, название товара.
стоимость (при изменении модели)
динамический табличный отчет, сумма прописью.
ФИО - текст, начинается с большой буквы.
Адрес- наличие символа @, пароль - от 8 символов, большие, маленькие буквы, цифры и тому подобное.
Текстовые поля должны быть очищены при получении фокуса. Проверять нужно сразу, по событию оnBlur .. Alert не использовать.
В зависимости от выбранного элемента первой группы формируются элементы второй(select). Постоянно отображать итоговый результат. Обновляется при изменении текста любого элемента.
Вот мне попалось такое задание его нужно сделать масимум в ООП но я сделал больше функционально, но не все корректно работает не обновляется радио кнопки и проверки не полностью правильно работают, а вот вывести это все в таблицу не знаю как сделать вообще, что здесь неправильно помогите пожалуйста.
script.js
var Validator = function(form) {
this.form = $(form);
function Callme() {
for (var i in Elements) {
var type = i;
var validation = Elements[i];
switch (type) {
case 'name':
if (!validation.reg.test(validation.selector.val())) {
document.getElementById("name").placeholder = 'Not a valid name.';
}
else {
det1[1] = document.getElementById('name').value + '\n';
var str = det1.join(' ');
//document.getElementById('text').value = str;
}
break;
case 'email':
if (!validation.reg.test(validation.selector.val())) {
document.getElementById("email").placeholder = 'Not a valid e-mail address';
}
else {
det1[7] = document.getElementById('email').value + '\n';
var str = det1.join(' ');
//document.getElementById('text').value = str;
}
break;
case 'surname':
if (!validation.reg.test(validation.selector.val())) {
document.getElementById("surname").placeholder = 'Not a valid surname.';
}
else {
det1[3] = document.getElementById('surname').value + '\n';
var str = det1.join(' ');
}
break;
case 'lastname':
if (!validation.reg.test(validation.selector.val())) {
document.getElementById("lastname").placeholder = 'Not a valid lastname';
}
else {
det1[5] = document.getElementById('lastname').value + '\n';
var str = det1.join(' ');
}
break;
case 'pass':
if (validation.reg.test(validation.selector.val()) || validation.selector.val() == '') {
document.getElementById("pass").placeholder = 'Not a valid password';
}
else {
det1[9] = document.getElementById('pass').value + '\n';
var str = det1.join(' ');
}
break;
default:
break;
}
}
e.preventDefault();
}
$(function() {
var callme;
$('#onblur-callme input')
.focus(function() {
callme = false;
})
.blur(function() {
callme = true;
setTimeout(function() {
if (callme) {
Callme();
}
}, 1);
});
});
var Elements = {
name: {
selector: $('#name'),
reg: /^[a-zA-Z]{2,20}$/
},
surname: {
selector: $('#surname'),
reg: /^[a-zA-Z]{2,20}$/
},
lastname: {
selector: $('#lastname'),
reg: /^[a-zA-Z]{2,20}$/
},
email: {
selector: $('#email'),
reg: /^[a-zA-Z0-9.!#$%&'*+\/=?^_`{|}~-]+@[a-zA-Z0-9](?:[a-zA-Z0-9-]{0,61}[a-zA-Z0-9])?(?:\.[a-zA-Z0-9](?:[a-zA-Z0-9-]{0,61}[a-zA-Z0-9])?)*$/
},
pass: {
selector: $('#pass'),
reg: /^[a-zA-Z]{2,20}$/
}
};
var handleError = function(element, message) {
element.addClass('input-error');
var $li = element.parent('li');
var error = $('<div class="error"></div>').text(message);
error.appendTo($li);
element.keyup(function() {
$(error).fadeOut(1000, function() {
element.removeClass('input-error');
});
});
};
};
var aHouseValues = ["WDS.150,DW.30,D.342", "F1.50,Dc1.300", "FDS1.500,5DD.150", "D1.300", "D1.550,D123.1000,CVD.1500,FG1.2500,DWR23.900"];
function getHouseValuesByStreet(index){
var sHouseValues = aHouseValues[index];
return sHouseValues.split(",");
}
function MkHouseValues(index){
var aCurrHouseValues = getHouseValuesByStreet(index);
var nCurrHouseValuesCnt = aCurrHouseValues.length;
var oHouseList = document.forms["form1"].elements["model"];
var oHouseListOptionsCnt = oHouseList.options.length;
oHouseList.length = 0;
for (i = 0; i < nCurrHouseValuesCnt; i++){
if (document.createElement){
var newHouseListOption = document.createElement("OPTION");
newHouseListOption.text = aCurrHouseValues[i];
newHouseListOption.value = aCurrHouseValues[i];
(oHouseList.options.add) ? oHouseList.options.add(newHouseListOption) : oHouseList.add(newHouseListOption, null);
}else{
oHouseList.options[i] = new Option(aCurrHouseValues[i], aCurrHouseValues[i], false, false);
}
}
}
MkHouseValues(document.forms["form1"].elements["mark"].selectedIndex);
var validator = new Validator('#test');
validator.validate();
det1 = ["Name: "," ","Surname: "," ","Lastname: "," ","Email: "," ","Password: "," ","Color: "," ","Shade: "," ","Producer: "," ","Brand: "," ","Model: "," ","Cof.Colour"," ","Price"," "];
mas = [["Blue-black","Blue-yellow","Blue-red",[0.3]],["Red and yellow","Red green","Red and black",[0.05]],["Yellow and white","Yellow-blue","Yellow-black"],[0.9]];
var buttons = document.getElementsByName("radio1");
length_m = mas.length;
function setRadio(event) {
var options = document.getElementsByName("radio1");
var options2 = document.getElementsByName("radio2");
if (options) {
for (var i = 0; i < options.length; i++) {
if (options[i].checked){
o = options[i].value;
document.getElementById('lb1').innerHTML= mas[i][0];
document.getElementById('lb2').innerHTML= mas[i][1];
document.getElementById('lb3').innerHTML= mas[i][2];
options2[0].value = mas[i][0];
options2[1].value = mas[i][1];
options2[2].value = mas[i][2];
k = i;
}
}
}
det1[11] = event.target.value+ '\n';
var str = det1.join(' ');
//document.getElementById('text').value = str;
cof = parseFloat(mas[k][3]);
det1[21] = mas[k][3] +'\n';
}
for (var i = 0; i < buttons.length; i++)
buttons[i].addEventListener("change", setRadio);
var buttons2 = document.getElementsByName("radio2");
function setRadio2(event) {
det1[13] = event.target.value.split(',')+'\n';
var str = det1.join(' ');
document.getElementById('text').value = str;
}
for (var i = 0; i < buttons.length; i++)
buttons2[i].addEventListener("change", setRadio2);
function run1() {
det1[15] = document.getElementById("select1").value+ '\n';
var str = det1.join(' ');
document.getElementById('text').value = str;
}
function run2() {
det1[17] = document.getElementById("select2").value.split('.')[0]+ '\n';
var str = det1.join(' ');
document.getElementById('text').value = str;
price = document.getElementById("select2").value.split('.');
det1[23] = (parseInt(price[1]))*cof;
}
function checks() {
var cbx = document.getElementById("flags").getElementsByTagName("input"), mas = [];
for (i=0; i < cbx.length; i++) {
if (cbx[i].type === "checkbox" && cbx[i].checked) {
mas.push(cbx[i].value);
}
}
det1[15] = mas + '\n';
var str = color.join(' ');
document.getElementById('text').value = str;
};