Как сделать необходимый ввод

Что я хочу, так это то, что когда оба поля, то есть fname и lname, остаются пустыми, всплывающее окно должно показывать оба сообщения, т.е. «Имя должно быть заполнено», «Фамилия должна быть заполнена» ».Как сделать необходимый ввод

Какие изменения мне необходимо сделать?

<!DOCTYPE html> 
<html> 
<head> 
    <script> 
     function validateForm() { 
      var x = document.forms["myForm"]["fname"].value; 
      if (x == null || x == "") { 
       alert("First name must be filled out"); 
       document.myForm.fname.focus(); 
       return false; 
      } 

      var y = document.forms["myForm"]["lname"].value; 
      if (y == null || y == "") { 
       alert("Last name must be filled out"); 
       document.myForm.lname.focus(); 
       return false; 
      } 
     } 
    </script> 
</head> 
<body> 

<form name="myForm" action="demo_form.asp" onsubmit="return validateForm()" method="post">First name: 
    <input type="text" name="fname">Last name: 
    <input type="text" name="lname"> 
    <input type="submit" value="Submit"> 
</form> 

</body>

источник

2013-11-24 user3026996

Пожалуйста, поиск «проверки, если вход пуст «, есть сотни результатов. – jackJoe

Если вы используете Firefox в Chrome, очень полезно открыть консоль. Консоль должна сообщить вам, какие ошибки возникают, чтобы вы знали, что вам нужно исправить. Вы также можете ввести javascript непосредственно в консоль, чтобы протестировать вещи, не создавая совершенно новый файл. – ahansen

помните, что это никогда не требуется * на стороне клиента. Обязательно подтвердите как можно больше (если не больше) на стороне сервера. – zamnuts

Возможно, это даст вам некоторые идеи о том, как поступить:

function validateForm() { 
    var errors = [], 
     fname = document.forms["myForm"]["fname"], 
     lname = document.forms["myForm"]["lname"]; 

    if (lname.value == "") { 
     errors.unshift("Last name must be filled out"); 
     lname.focus(); 
    } 
    if (fname.value == "") { 
     errors.unshift("First name must be filled out"); 
     fname.focus(); 
    } 
    if (errors.length > 0) { 
     alert("Cannot submit\n" + errors.join("\n")); 
     return false; 
    } 
}

Демо: http://jsfiddle.net/MKdg5/

Первое, что вы заметите, что это легче читать, потому что блоки отступ. Также:

В настоящее время вы используете document.forms["myForm"]["fname"] и document.myForm.fname для доступа к тому же полю. Выберите одну сторону и использовать его постоянно, или
Создайте переменную, которая ссылается на поле, fname, а затем использовать fname.value и fname.focus()
Не беспокоить тестирование для null, потому что .value свойство никогда не будет.
Вместо того, чтобы немедленно предупредить об ошибке и возврате, добавьте текст ошибки в массив, а затем в конце теста, если массив пуст.

источник

2013-11-24 11:24:48 nnnnnn

Четкий и понятный для новичка! +1 –

Попробуйте проверить ваше поле:

if (!x || x.length == 0)

источник

2013-11-24 11:28:10 Jekis

Учитывая, что в коде OP 'x' есть строка, почему бы вы протестировали'! X', а также 'x.length'?Кроме того, возникает вопрос, как изменить код, чтобы отобразить одно сообщение об ошибке в обоих полях. – nnnnnn

Прочтите еще раз - не единственная ошибка, но и то, и другое. ! x означает не null, а не undefined и т. д. Длина> 0 означает, что x не пуст. – Jekis

Извините, длина == 0 означает пустой. – Jekis

Вы можете пойти с Hthml 5 required. Это намного проще и аккуратнее.

<form> 
First name: <input type="text" name="fname" required="required"> 
Last name: <input type="text" name="lname" required="required"> 
<input type="submit" value="Submit"> 
</form>

Demo

Примечание: Атрибут required поддерживается в Internet Explorer 10, Firefox, Opera и Chrome. Но он не поддерживается в Internet Explorer 9 и более ранних версиях, или в Safari.

источник

2013-11-24 11:32:36

Это хороший опрятный способ, но он [не работает с моим браузером] (http://caniuse.com/form-validation). (Хотя при условии, что OP также нуждается в проверке на стороне сервера, возможно, это не так важно, если проверка на стороне клиента не работает для старого IE.) – nnnnnn

@nnnnnn Ну, я собирался обновить свой ответ .. :) .. Я знаю, что он ограничен, но пришло время начать использовать атрибуты html5, хотя я согласен с вашей точкой зрения, что он несовместим со всеми браузерами. –

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

if (x==null || x=="") 
{ 
    if (y==null || y=="") 
    { 
    //codes for both are not validated 
    } 
    else 
    { 
    //codes for just x is not validated 
    } 
} 
else 
    if (y==null || y=="") 
    { 
    //codes for y is not validated 
    } 
    else 
    { 
    //codes for all validated 
    }

Таким образом, использование оператора возврата в каждом блоке не нарушит ваше выполнение функции

источник

2013-11-24 11:48:52 Hessam

Как сделать необходимый ввод

ответ

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