Блог

Главная - Вопросы по программированию - Как мне проверить два поля ввода в HTML-форме?

Как мне проверить два поля ввода в HTML-форме?

#javascript #html

#javascript #HTML

Вопрос:

Я хочу иметь два ввода, один будет именем, а другой — кодом модуля.
Как я могу отобразить сообщение об ошибке на любом из входных данных, если шаблон неверен для любого из полей или если одно поле пустое?
Уверен, что что-то не так с моим оператором if-else://
Когда я нажимаю отправить, действие формы будет активировано.
Ценю любую помощь 🙂

 function validateForm() {
  var fname = document.getElementById("fname").value;
  if (/^[A-Z]D{2,30}$/.test(fname) == false) {
  //if its true, it will go to the second input
    document.getElementById("errorName").innerHTML = "Wrong format";
    fname.style.color="red";
    return false;
  } else {
    document.getElementById("errorName").innerHTML = "";
  }
    
  var mcode = document.getElementById("mcode").value;
  if (/^[a-z]{3}[1-9]d{4}$/.test(mcode) == false) {
    document.getElementById("errorCode").innerHTML = "Wrong format";
    mcode.style.color="red";
    return false;
  } else {
    document.getElementById("errorCode").innerHTML = "";
  }
  return true;
}  
 <form action="handleServer.php" method="get" onSubmit="return validateForm()">
  First name: </br>
  <input id="fname" type="text" name="fname" size="30"> 
  <span id="errorName" class="error"></br> 
  
  <!-- module code -->
  Module code: </br>
  <input id="mcode" type="text" name="mcode" size="30"> 
  <input type="submit" value="Submit">
  <span id="errorCode" class="error"></br>

Комментарии:

1. Что не так на данный момент?

2. Похоже, у вашего элемента формы нет закрывающего тега. Это ошибка копирования-вставки при вставке кода сюда?

3. Обратите внимание, что отображаемый HTML недопустим; </br> является недопустимой конструкцией: <br> является подходящим и допустимым; <br/> допускается, но не требуется. В коде отсутствует ряд закрывающих элементов, которые требуются, например </span> , и </form> .

4. @iAmOren Есть причина, по которой вы откатили редактирование? Маркер по умолчанию использует свой анализатор JavaScript, и редактирование изменило его на использование своего синтаксического анализатора HTML, что было более полезно, учитывая, что код — HTML…

5. @HereticMonkey, редактирование было беспорядочным, и откатить было проще, чем исправить редактирование.

Ответ №1:

Вы можете сделать что-то вроде этого, чтобы проверить, являются ли поля ввода пустыми

 function validateForm() {
    var fname = document.getElementById("fname").value;
    var mcode = document.getElementById("mcode").value;
    var errorName = document.getElementById("errorName");
    var errorCode = document.getElementById("errorCode");

    if (fname === '') {
        errorName.innerHTML = "fname empty";
        return false;
    }
    if (mcode === '') {
        errorCode.innerHTML = "mcode empty";
        return false;
    }
    if (/^[A-Z]D{2,30}$/.test(fname) == false) //if its true, it will go to the second input 
    {
        errorName.innerHTML = "Wrong format";
        fname.style.color = "red";
        return false;
    } else {
        errorName.innerHTML = "";
    }

    if (/^[a-z]{3}[1-9]d{4}$/.test(mcode) == false) {
        errorCode.innerHTML = "Wrong format";
        mcode.style.color = "red";
        return false;
    } else {
        errorCode.innerHTML = "";
    }
    return true;
}

Комментарии:

1. Большое спасибо за комментарий! попробую ваш метод, однако я также пытаюсь понять, что пошло не так для моего!

2. Привет! я пробовал, это работает для пустых входных данных, но когда я ввожу неправильные форматы для обоих входных данных, отображается сообщение об ошибке, но моя форма отправляется, что означает, что она переходит на другой URL. Интересно, что-то не так с моим действием формы? :/