Проверка HTML-формы и JavaScript не работает

Question

Проверка JavaScript не выполняется правильно. Форма отправляется в любом случае без проверки вопроса

Я пытался изменить с getElementByID.value; и document.form[][].value;

Попытался изменить мой JavaScript, чтобы сделать это для моей функции init();но также в атрибуте HTML obsubmit.

Действительно запутался в том, что я делаю неправильно

function regValidate() {
  var errMsg = document.getElementById("errMsg");
  var username = document.getElementById("Username").value;
  errMsg.style.padding = "10px";
  var emailRE = "@";
  var email = document.forms["register"]["email"].value;
  if (email.match(emailRE) || email.length < 6) {
    errMsg.innerHTML = "Please enter a valid email";
    return false;
  } else if (username.length < 5) {
    errMsg.innerHTML = "Please enter a valid username";
  }
}

<form name="register" action="(this is a realwebsite, removing due to privacy + legal reasons)" onsubmit="return regValidate()" method="post">
  <p>
    <h1 class="form--title">Register</h1>
  </p>
  <div id="errMsg"></div>
  <p>
    <label for="email">Email</label>
    <input type="text" name="email" id="email" placeholder="Enter your email" onkeypress="this.style.width = ((this.value.length + 1) * 8) + 'px';" />
  </p>
  <p>
    <label for="username">User ID</label>
    <input type="text" name="username" id="username" placeholder="Enter your username" onkeypress="this.style.width = ((this.value.length + 1) * 8) + 'px';" />
  </p>
  <p>
    <input type="submit" value="submit" /><br>
    <input type="reset" value="reset" />
  </p>

Нет сообщения об ошибке, оно просто идет прямо на страницу формы, которая показывает, что было отправлено для какого атрибута имени ...

Answer 1

возможно вам стоит взглянуть на этот код:

const MyForm   = document.querySelector('form[name=register]')
    , ErrorMsg = document.querySelector('#errMsg')

ErrorMsg.style.padding = "10px";  // better to do this with some CSS
const emailRE = "@";              // see regex for futur ?

MyForm.onsubmit=e=>  // regValidate()
{
  e.preventDefault()  // just for testing here 

  if (!MyForm.email.value.match(emailRE) || MyForm.email.value.length < 6)
  {
    ErrorMsg.textContent = "Please enter a valid email";
    return false;
  }
  if (MyForm.username.value.length < 5) {
    ErrorMsg.textContent = "Please enter a valid username";
    return false;
  }

  console.log('form is OK')
}
MyForm.onreset=_=>
{
  MyForm.email.style.width    = '110px'
  MyForm.username.style.width = '140px'
  ErrorMsg.innerHTML          = '&nbsp;'
}

MyForm.email.addEventListener('input', function() {
  this.style.width = `${(this.value.length +1) *8}px`
})
MyForm.username.addEventListener('input', function() {
  this.style.width = `${(this.value.length +1) *8}px`
})

<form name="register" action="XXX" method="post" >
  <p>
    <h1 class="form--title">Register</h1>
  </p>
  <div id="errMsg">&nbsp;</div>
  <p>
    <label for="email">Email</label>
    <input type="text" name="email" id="email" placeholder="Enter your email" style="width:110px" value="" >
  </p>
  <p>
    <label for="username">User ID</label>
    <input type="text" name="username" id="username" placeholder="Enter your username" style="width:140px" value="" >
  </p>
  <p>
    <button type="submit">submit</button><br>
    <button type="reset">reset</button>
  </p>
</form>

Answer 2

Вам не нужно e.preventDefault(), вам просто нужно использовать return false во всех ошибках проверки.

getElementById("Username") должно быть getElementById("username"), так как идентификаторы чувствительны к регистру.

Ваш тест на регулярное выражение электронной почты выполнен в обратном направлении, вы хотите сообщить об ошибке, если она не соответствует.

function regValidate() {
  var errMsg = document.getElementById("errMsg");
  var username = document.getElementById("username").value;
  errMsg.style.padding = "10px";
  var emailRE = "@";
  var email = document.getElementById("email").value;
  if (!email.match(emailRE) || email.length < 6) {
    errMsg.innerHTML = "Please enter a valid email";
    return false;
  } else if (username.length < 5) {
    errMsg.innerHTML = "Please enter a valid username";
    return false;
  }
}

<form name="register" action="(this is a realwebsite, removing due to privacy + legal reasons)" onsubmit="return regValidate()" method="post">
  <p>
    <h1 class="form--title">Register</h1>
  </p>
  <div id="errMsg"></div>
  <p>
    <label for="email">Email</label>
    <input type="text" name="email" id="email" placeholder="Enter your email" onkeypress="this.style.width = ((this.value.length + 1) * 8) + 'px';" />
  </p>
  <p>
    <label for="username">User ID</label>
    <input type="text" name="username" id="username" placeholder="Enter your username" onkeypress="this.style.width = ((this.value.length + 1) * 8) + 'px';" />
  </p>
  <p>
    <input type="submit" value="submit" /><br>
    <input type="reset" value="reset" />
  </p>
</form>

Answer 3

Вот рабочий код:

function regValidate() {
  var errMsg = document.getElementById("errMsg");
  var username = document.getElementById("username").value;
  errMsg.style.padding = "10px";
  var emailRE = "@";
  var email = document.forms["register"]["email"].value;
  if (email.match(emailRE) || email.length < 6) {
    errMsg.innerHTML = "Please enter a valid email";
  } else if (username.length < 5) {
    errMsg.innerHTML = "Please enter a valid username";
  }

  return false;
}

Я удалил аргумент функции и добавил return false, чтобы действие отправки формы не происходило. Также исправлено имя пользователя в верхнем регистре для имени пользователя в соответствии с вашим html

Единственное, что изменилось в html - это вызов функции onsubmit, не имеющий аргументов, поскольку он был удален из javascript:

<form name="register" action="(this is a realwebsite, removing due to privacy + legal reasons)" onsubmit="return regValidate()" method="post">
  <p>
    <h1 class="form--title">Register</h1>
  </p>
  <div id="errMsg"></div>
  <p>
    <label for="email">Email</label>
    <input type="text" name="email" id="email" placeholder="Enter your email" onkeypress="this.style.width = ((this.value.length + 1) * 8) + 'px';" />
  </p>
  <p>
    <label for="username">User ID</label>
    <input type="text" name="username" id="username" placeholder="Enter your username" onkeypress="this.style.width = ((this.value.length + 1) * 8) + 'px';" />
  </p>
  <p>
    <input type="submit" value="submit" /><br>
    <input type="reset" value="reset" />
  </p>
  </form>

Answer 4

я изменил несколько строк ваших кодов, вы не можете использовать e.preventDefault () в событии onsubmit, потому что вы использовали «return reg Validate ()». ожидаемая переменная bool от regValidate ()

 <!DOCTYPE html>
<html>
<body>

<p>When you submit the form, a function is triggered which alerts some text.</p>

<form name="register" action="(this is a realwebsite, removing due to privacy + legal reasons)" onsubmit="return regValidate()" method="post">
  <p>
    <h1 class="form--title">Register</h1>
  </p>
  <div id="errMsg"></div>
  <p>
    <label for="email">Email</label>
    <input type="text" name="email" id="email" placeholder="Enter your email" onkeypress="this.style.width = ((this.value.length + 1) * 8) + 'px';" />
  </p>
  <p>
    <label for="username">User ID</label>
    <input type="text" name="username" id="username" placeholder="Enter your username" onkeypress="this.style.width = ((this.value.length + 1) * 8) + 'px';" />
  </p>
  <p>
    <input type="submit" value="submit" /><br>
    <input type="reset" value="reset" />
  </p>
  </form>

<script>
function regValidate() {
  var errMsg = document.getElementById("errMsg");
  var username = document.getElementById("username").value;
  errMsg.style.padding = "10px";
  var emailRE = "@";
  var email = document.forms["register"]["email"].value;
  if (email.match(emailRE) || email.length < 6) {
    errMsg.innerHTML = "Please enter a valid email";
    return false;
  } else if (username.length < 5) {
    errMsg.innerHTML = "Please enter a valid username";
    return false;
  }

  return true;
}
</script>

</body>
</html>