Тема: Динамічна обробка форми ООП
Є форма містить:
3 текстових поля: прізвище, ім'я / прізвище, по батькові
текстові поля: e-mail, password
прапорці виробники
групи перемикачів кольору відтінки 2 об'єкти Select: група товару, назва товару.
вартість (при зміні моделі)
динамічний табличний звіт, сума прописом.
ПІБ - текст, починається з великої літери.
Адреса- наявність символу @, пароль - від 8 символів, великі, маленькі букви, цифри тощо.
Текстові поля повинні бути очищені при отриманні фокусу. Перевіряти потрібно відразу, за подією оnBlur .. Alert не використовувати.
Залежно від обраного елемента першої групи формуються елементи другої (select). Постійно відображати підсумковий результат. Оновлюється при зміні тексту будь-якого елементу.
Ось мені попалося таке завдання його потрібно зробити максимум в ООП але я зробив більше функціонально, але не все коректно працює не оновлюється радіо кнопки і перевірки не цілком адекватно працюють, а ось вивести це все в таблицю не знаю як зробити взагалі, що тут неправильно допоможіть будь ласка.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
<div id = "onblur-callme">
<form action="#" method="post" id="test" name="form1">
<fieldset>
<legend>Contact information</legend>
<table>
<tr>
<td>
<td>
<li>
<label for="name">Name:</label>
<input type="text" name="name" id="name" />
</li>
<li>
<label for="name">Surname:</label>
<input type="text" name="surname" id="surname" />
</li>
<li>
<label for="name">Lastname</label>
<input type="text" name="lastname" id="lastname" />
</li>
</td>
<td>
<li>
<label for="email">Email:</label>
<input type="text" name="email" id="email" />
</li>
<li>
<label for="pass">Password:</label>
<input type="text" name="pass" id="pass" />
</li>
</td>
</ul>
</tr>
</table>
<p><input type="submit" name="send" id="send" value="Send" /></p>
</fieldset>
<br>
<table>
<tr>
<td>
<fieldset>
<div id = "flags" onchange="checks()">
<legend>Producer</legend>
<li>
<input type="checkbox" name = "checkbox1" id = "check1" value="Volswagen"> Volswagen
</li>
<li>
<input type="checkbox" name = "checkbox1" id = "check2" value="Hyundai">Hyundai
</li>
<li>
<input type="checkbox" name = "checkbox1" id = "check3" value="Vaz"> Vaz
</li>
<li>
<input type="checkbox" name = "checkbox1" id = "check4" value="Zaz"> Zaz
</li>
<li>
<input type="checkbox" name = "checkbox1" id = "check5" value="Tesla"> Tesla
</li>
</div>
</fieldset>
</td>
<td>
<fieldset>
<legend>Color Tint</legend>
<li>
<input type="radio" name = "radio1" value="Blue"> Blue
</li>
<li>
<input type="radio" name = "radio1" value="Red"> Red
</li>
<li>
<input type="radio" name = "radio1" value="White"> White
</li>
<br>
<li>
<input type="radio" name = "radio2" value=" "> <label id = "lb1"></label>
</li>
<li>
<input type="radio" name = "radio2" value=""> <label id = "lb2"></label>
</li>
<li>
<input type="radio" name = "radio2" value=""> <label id = "lb3"></label>
</li>
</fieldset>
</td>
<td>
<fieldset>
<legend>Brand Model</legend>
<select name="mark" onChange="MkHouseValues(this.selectedIndex)" onclick="run1()">
<option value="Qwer">Qwer</option>
<option value="Cvwa">Cvwa</option>
<option value="Vwqqs">Vwqqs</option>
<option value="Vqs">Vqs</option>
<option value="Jed">Jed</option>
</select>
<select name="model" onclick="run2()">
<option value="N/A"></option>
</select>
</fieldset>
</td>
</tr>
</table>
</form>
</div>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
<script src="script.js"></script>
</body>
</html>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;
};
