Форум

sana · #1 (**permalink**) 23.04.2015, 23:51

Добрый вечер,
У меня всего два поля: имя и емеил. Проверка формуляра работает некорректно. До тех пор пока не введется имя, емеил не проверяется. Хотелось бы сделать так, чтобы, когда запускалась функция проверки при нажатии на кнопку ок,имя и емеил проверялись одновременно. Как это можнл сделать?

function check(form){
 if(form.name.value.length<1){
  alert("Введиье имя!");
  return false;
 }

 
 email=form.email.value;
 if (email.indexOf("@")==-1 || email.indexOf("@")<1 || email.lastIndexOf(".")>email.length-3 || email.lastIndexOf(".")<email.length-5){
  alert("Неправильный e-postadress!");
  return false;
 }

 return true;
}

<form onSubmit="return check(this)" action="thanks.html">
    <fieldset>
        <legend>Введите данные</legend>
        <p>Name: <input name="name" type="text" id="name"></p>
        <p>E-mail: <input name="email" type="text" id="email"></p>
        <input type="submit" value="Ok" id="submit">
    </fieldset>
</form>

рони · #2 (**permalink**) 24.04.2015, 00:30

sana,
сделайте 1 return в функции а не три как сейчас

sana · #3 (**permalink**) 24.04.2015, 11:05

Сообщение от рони

sana,
сделайте 1 return в функции а не три как сейчас

Теперь получается, что функция проверяет одновременно оба поля, хотя поле емейла еще даже не заполнено.

function check(form){
 if(form.name.value.length<1){
  alert("Введите имя!");

 }



 if (form.email.value.indexOf("@")==-1 || email.indexOf("@")<1 || email.lastIndexOf(".")>email.length-3 || email.lastIndexOf(".")<email.length-5){
  alert("Неправильный e-postadress!");

 }

return false;

}

kostyanet · #4 (**permalink**) 24.04.2015, 11:15

Харе тупить, функция проверки должна возвращать или коды проверки или мессагу с результатом проверки.

kostyanet · #5 (**permalink**) 24.04.2015, 11:22

function isvalid(el){
 var log=[];
 if(el.name.value.trim().length<1)
   log.push("Короче, имя не должно быть короче 1 буквы");
 if(el.email.value.indexOf("@")==-1)
   log.push('И имейла без собаки не бывает');
 if(log.length) {
   alert( log.join('<br>'));
   return false;
 }
  else
   return true;
}

в нажатии кнопки

return isvalid(this.form); // если вернется фолс - событие не проканает, а если тру - проканает дальше и форма отправится

рони · #6 (**permalink**) 24.04.2015, 11:26

sana,

<!DOCTYPE HTML>

<html>

<head>
  <title>Untitled</title>
  <meta charset="utf-8">
   <script>
   function check(form) {
      var ok = true;
       if (form.name.value.length < 1) {

           alert("Введите имя!");
           ok = false;
       }
       var email = form.email.value;
       if (email.indexOf("@") == -1 || email.indexOf("@") < 1 || email.lastIndexOf(".") > email.length - 3 || email.lastIndexOf(".") < email.length - 5) {
           alert("Неправильный e-postadress!");
           ok = false;
       }
       return ok;
   }

  </script>
</head>

<body>
<form onSubmit="return check(this)" action="thanks.html">
    <fieldset>
        <legend>Введите данные</legend>
        <p>Name: <input name="name" type="text" id="name"></p>
        <p>E-mail: <input name="email" type="text" id="email"></p>
        <input type="submit" value="Ok" id="submit">
    </fieldset>
</form>


</body>

</html>

kostyanet · #7 (**permalink**) 24.04.2015, 11:37

Для имейлов применяют вот такой паттерн

^[^\s@]+@[^\s@]+\.[^\s@]+$

пишите его прямо в атрибут pattern="^[^\s@]+@[^\s@]+\.[^\s@]+$" и там можно либо встроенную валидацию формы заюзать, либо уже в цикле прогнать скриптом все найденные поля. А чтобы и сообщения об ошибках не хранить в скрипте, так же в атрибут data-err="Короче, имя не должно быть короче 1 буквы" можно записать.

То есть примерно так

for(var i=0,inputs=form.elements,inp,log=[];inp=inputs[i];i++)
if(!new RegExp(inp.getAttribute('pattern')).test(inp.value)
  log.push(inp.getAttribute('data-err'));

Ну далее по месту. То есть это будет вся валидация для любого количества полей в форме при условии что у всех у них есть паттерн с регой и дата-ерр

kostyanet · #8 (**permalink**) 24.04.2015, 11:41

кроме файлов, конечно. с файлами - геморрой капец.

Регами и на минимальную длину все проверяется. Например имя или там фамилия.

Да, form.elements подгребет и все кнопки. Надо проверять чтоб не кнопка или не делать кнопки, а нарисовать обычный <a>Отправить</a>

Да и возвращать ничего не надо в случае когда валидация идет по нажатию кнопки. Это когда по вводу. А когда кнопка уже нажата то если лог ошибок не пустой - form.submit() и все.

Точнее зависит от реализации. Если инлайн профтыкали типа onsubmit="isvalid(this)" то вернув false отмените событие. А если забиндили <a> через addEventListener и нашли форму, то деваться некуда - надо ее отправлять form.submit()

sana · #9 (**permalink**) 29.04.2015, 16:14

Переписала код, но есть неточность. Если поле с емейлом указано верно, а поле с именем не заполнено, то данные отправляются. Если же емеил и имя указаны некорректно,то появляется окно с указанием ошибок. Что не так?

function check(form) {
  var nameIsOk = true;
  var emailIsOk = true;
  var errorMsg = "";

  if (form.name.value.length < 1) {
    errorMsg += "забыл имя";
    nameIsOk = false;
  }

  var email = form.email.value;
  var atPos = email.indexOf("@");
  var lastDotPos = email.lastIndexOf(".");

  if (email.length == 0) {
    if (!nameIsOk) {
      errorMsg += "\n";
    }
    errorMsg += "забыл email!";
    emailIsOk = false;
  } else if (email.length < 6
      || atPos == -1
      || atPos != email.lastIndexOf("@")
      || atPos < 1
      || lastDotPos <= atP + 1
      || lastDotPos + 2 >= email.length) {
    emailIsOk = false;
    if (!nameIsOk) {
      errorMsg += "\n";
    }
    errorMsg += "Email '" + email + "' некорректный адрес. ";
  }

  if (!nameIsOk || !emailIsOk) {
    alert(errorMsg);
    return false;
  }

  return true;
}

рони · #10 (**permalink**) 29.04.2015, 17:03

sana,
строка 25

Форум

Справочник

Discord чат

Курсы javascript