проверка длины значения пользователя (javascript) - PullRequest
0 голосов
/ 13 ноября 2018

Я практикую свои знания начинающих JavaScript в простой форме. Я хочу, чтобы пользователь ввел 10-значный номер телефона (в случае, если он меньше 10 или более 10, я создал недопустимый класс стилей, поэтому пользователю будет разрешено ввести только 10 цифр для своего номера телефона). Кроме того, после ввода номера телефона из 10 цифр пользователь сможет нажать «+» и получить второе поле для второго номера телефона (второе окно появится, когда вы нажмете «+», только если пользователь ввел 10 цифр для его первый номер телефона). Я использовал if () для проверки номера телефона, но он не работает. Ниже мой код, есть идеи?

<!DOCTYPE html>
<html>
<head>
    <title>Numere de telefon</title>
    <style>
        .invalid {
            background-color: rgb(139,0,0,0.2);
            color: darkgreen;
            border: 1px green solid;
        }
    </style>
    <script>
        function minL(elem,event,nr){
            var v = elem.value; 
            if(v.length < nr ){
                elem.classList.add("invalid");
            } else if (v.length > nr) {
                elem.classList.add("invalid");
            } else {
                elem.classList.remove("invalid");
            }
        }

         function addInput(elem,event){
            event.preventDefault(); 
            var container = document.querySelector("#containerNrTel"); 
            if(minL(document.querySelector("[name=numarTelefon]"))){
                container.innerHTML += '<input type="text" placeholder="nr telefon" />'; 
            }

        }

    </script>
</head>
<body>
    <form>
    <fieldset>
        <legend>Cont nou</legend>
        <input type="text" placeholder="nume">
        <input type="text" placeholder="prenume">
        <input type="text" placeholder="nr telefon" name="numarTelefon" oninput="" onchange="minL(this,event,10);">
        <input type="button" value="+" onclick="addInput(this,event);">
        <div id="containerNrTel"></div>
        <input type="button" value="Submit">
    </fieldset>
    </form>    
</body>
</html>

Спасибо заранее, Иоанна

1 Ответ

0 голосов
/ 13 ноября 2018

Есть два основных вопроса.

  1. Вызов minL в функции addInput не имеет нужного количества параметров.
  2. minL не возвращает логическое значение, когда addInput ожидает его.

    function minL(elem,event,nr){
        var v = elem.value; 
        if(v.length < nr ){
            elem.classList.add("invalid");
        } else if (v.length > nr) {
            elem.classList.add("invalid");
        } else {
            elem.classList.remove("invalid");
            return true;
        }
    }
    
     function addInput(elem,event){
        event.preventDefault(); 
        var container = document.querySelector("#containerNrTel"); 
        if(minL(document.querySelector("[name=numarTelefon]"), event, 10)){
            container.innerHTML += '<input type="text" placeholder="nr telefon" />'; 
        }
    
    }
    
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...