1

Тема: Динамічна обробка форми ООП

Є форма містить:
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;
};

2

Re: Динамічна обробка форми ООП

то які у вас проблеми, конкретно?

3

Re: Динамічна обробка форми ООП

вивести це все в таблицю не знаю як зробити. І перевірки у на валідність не коректно працють

4

Re: Динамічна обробка форми ООП

створюєте елемент таблиці і запихуєте в неї всякі tr та td, а в них дані запихуєте, загугліть document.createElement і Node.append.
А по валідації що саме не виходе?

Подякували: leofun01, ostap34PHP2

5

Re: Динамічна обробка форми ООП

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();
    }

коли вводимо  у поле email будь які літери то воно його приймає як правильний і ПІБ має починатися з великої літери

6

Re: Динамічна обробка форми ООП

і ще коли у групі radio1 вибираємо один елемент, то група radio2 має вибирати із мащива необхідні значенняале воно не працює

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;
            }
        }
    }

7

Re: Динамічна обробка форми ООП

запихніть може то все на https://jsfiddle.net, щоб потицяти можна було

8

Re: Динамічна обробка форми ООП

покляцав трохи
https://jsfiddle.net/0g1br9nq/
купа помилок повилазила
https://cdn.discordapp.com/attachments/333936584481177600/501463333728157697/unknown.png
у вас ті помилки теж є?

Подякували: leofun011

9

Re: Динамічна обробка форми ООП

Ні немає, я у webstorm писав

10

Re: Динамічна обробка форми ООП

а консолю в браузері не відкривали?

Подякували: leofun011

11

Re: Динамічна обробка форми ООП

нажаль ні

12

Re: Динамічна обробка форми ООП

то відкривайте і дивіться

Подякували: leofun011

13

Re: Динамічна обробка форми ООП

Uncaught TypeError: validator.validate is not a function
    at script.js:163

ось у консолі у мене одна помилка, а може це все іза то що css відсутній

14

Re: Динамічна обробка форми ООП

до чого тут цсс?

Подякували: leofun011

15

Re: Динамічна обробка форми ООП

ні до чого це помилки у js показує

16

Re: Динамічна обробка форми ООП

і що тепер будете робити?

17 Востаннє редагувалося angruh14 (15.10.2018 22:19:23)

Re: Динамічна обробка форми ООП

Лабу не здам, а часу до завтра до вечора

18

Re: Динамічна обробка форми ООП

ну і норм

Подякували: leofun011