Как сделать все поля ввода обязательными перед отправкой формы?

Я новичок в JavaScript.Как сделать все поля ввода обязательными перед отправкой формы?

Так что я пытаюсь использовать чистый JavaScript для проверки правильности ввода полей формы. Проблема в том, что я использую span для создания «* Required» в правой части ввода, но только одно имя появляется при имени.

Я хочу, чтобы оба поля имели диапазон «* Обязательный», отображаются для обоих входов, когда они пусты, когда форма отправлена. Также, когда только один пуст, сделайте только один «* Обязательный».

Я ценю любые отзывы и советы, которые вы, ребята, можете мне дать.

<!DOCTYPE html> 
<html> 


    <title></title> 
    <head> 

    </head> 

    <body> 
    <form id = fourm> 
    <label>First Name:</label><br> 
     <input id="id1" type="text" name="firstname"><span id="demo" style="color:red"></span><br> 
    <label>Last Name:</label><br> 
     <input id="id2" type="text" name ="lastname"><span id="dema" style="color:red"></span><br> 
    <br><button onclick="myFunction()">Submit</button> 
    </form> 

    </body> 

</html> 



<script> 
function myFunction() { 
    if (!document.getElementById("id1").value) { 
     document.getElementById("demo").innerHTML = "*Required"; 
     document.getElementById("fourm").addEventListener("click", function(event){ 
    event.preventDefault() }); 

    } else if (document.getElementById("id1").value){ 
    document.getElementById("demo").innerHTML = ""; 
    return fourm; 
    } 
} 

function myFunction() { 
    if (!document.getElementById("id2").value) { 
     document.getElementById("dema").innerHTML = "*Required"; 
     document.getElementById("fourm").addEventListener("click", function(event){ 
    event.preventDefault() }); 

    } else if (document.getElementById("id2").value){ 
    document.getElementById("dema").innerHTML = ""; 
    return fourm; 
    } 
} 

</script>

источник

2016-03-24 Aaron Cha

метка вашего второго вход имеет идентификационную опечатку 'dema' вместо' demo' – Carlton

Ах да, есть два пролеты с отдельными идентификаторами. Должен ли я использовать только один? –

У вас не должно быть дублированных идентификаторов, дайте ярлыкам класс, например. 'input-label' и получить все элементы с соответствующим классом, например. 'var elements = document.getElementsByClassName (" input-label ");' – Carlton

У вас есть повторяющиеся определения функций!

Объявление функции семантически эквивалентно приведенному ниже выражению функции.

var myFunction = function() {}

если вы закодированы как ниже

myFunction = 1; 
var myFunction = function() {/*1*/}; 
var myFunction = function() {/*2*/};

она будет преобразована двигателем JS к чему-то эквивалентному, как показано ниже в связи с переменным грузоподъемного

var myFunction; 

myFunction = 1; 
myFunction = function() {/*1*/}; 
myFunction = function() {/*2*/};

функцией декларации, хотя поднимаются на верхняя часть в javascript, следовательно, позволяет вам вызывать их до их объявления.
Если у вас есть повторяющиеся объявления функций, как и в вашем случае, первое объявление заменяется вторым объявлением функции из-за подъема и вы теряете логику в первом.
Для следующего кода

myFunction =1; 
function myFunction() {/*1*/}; 
function myFunction() {/*2*/};

Вы можете думать о нем, как показано ниже.

var myFunction;    //Hoist the variable to top 
myFunction = function() {/*1*/};//Hoist the first function to top and assign 
myFunction = function() {/*2*/};//Hoist the second function to top and assign 
myFunction = 1;    //Assignment order changes

С декларациями функций, функция полностью водрузили на вершину без учета туда, где она была лексически определена. При использовании функциональных выражений только функциональная переменная поднимается, назначение функции сохраняется в лексическом местоположении.

function myFunction() { 
 

 
    //Reset error messages 
 
    document.getElementById("demo").innerHTML = ""; 
 
    document.getElementById("dema").innerHTML = ""; 
 

 

 
    if (!document.getElementById("id1").value) { 
 
    document.getElementById("demo").innerHTML = "*Required"; 
 
    document.getElementById("fourm").addEventListener("click", function(event) { 
 
     event.preventDefault() 
 
    }); 
 

 
    } else if (document.getElementById("id1").value) { 
 
    document.getElementById("demo").innerHTML = ""; 
 
    
 
    } 
 

 
    if (!document.getElementById("id2").value) { 
 
    document.getElementById("dema").innerHTML = "*Required"; 
 
    document.getElementById("fourm").addEventListener("click", function(event) { 
 
     event.preventDefault() 
 
    }); 
 

 
    } else if (document.getElementById("id2").value) { 
 
    document.getElementById("dema").innerHTML = ""; 
 
    
 
    } 
 
    return false; 
 
}

<!DOCTYPE html> 
 
<html> 
 

 

 
<title></title> 
 

 
<head> 
 

 
</head> 
 

 
<body> 
 
    <form id="fourm"> 
 
    <label>First Name:</label> 
 
    <br> 
 
    <input id="id1" type="text" name="firstname"><span id="demo" style="color:red"></span> 
 
    <br> 
 
    <label>Last Name:</label> 
 
    <br> 
 
    <input id="id2" type="text" name="lastname"><span id="dema" style="color:red"></span> 
 
    <br> 
 
    <br> 
 
    <button onclick="myFunction()">Submit</button> 
 
    </form> 
 

 
</body> 
 

 
</html>

источник

2016-03-24 00:52:18 santon

Спасибо за ответ, но проблема не в использовании плагина или JQuery. :) –

@Aaron: достаточно справедливо. Чтобы исправить это в коде, объедините свои функции в один. Вы назвали обе функции myFunction. Первое определение переписывается первым. Я обновлю фрагмент – santon

Спасибо тонну, если бы мне только понравился ваш ответ 100 раз! –

Как сделать все поля ввода обязательными перед отправкой формы?

ответ

Смежные вопросы