Прекратить отправку операции

Question

Прекратить отправку операции

Я пытаюсь остановить операцию отправки, когда поле имени пользователя не заполнено, и отображать некоторые предупреждения в div с идентификатором «err_msg»

<!-- Main jumbotron for a primary marketing message or call to action -->
<div class="jumbotron">
<div class="container">
<h1>Register</h1>
<form role="form" method="post">
<div id="data-text">
<input type="text" name="nick" placeholder="Nick" class="form-control" style="width: 250px;">
<input type="text" name="name" placeholder="Imię" class="form-control" style="width: 250px;">
<input type="text" name="surname" placeholder="Nazwisko" class="form-control" style="width: 250px;">
<input type="text" name="email" placeholder="Email" class="form-control" style="width: 250px;">
<input type="text" name="phone" placeholder="Telefon" class="form-control" style="width: 250px;">
<input type="text" name="password" placeholder="Hasło" class="form-control" style="width: 250px;">
<input type="text" name="repassword" placeholder="Powtórz hasło" class="form-control" style="width: 250px;">
</div>
<button type="submit" name='Proceed' value='register' class="btn btn-success">Zarejestruj</button>
</form>
<div id="err_msg"></div>
</div>
</div>

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

Должен ли я обрабатывать каждое поле с помощью JS, а затем использовать jQuery для публикации данных? Мне не нравятся возможные решения излишних

0

forms html message php submit

Решение

Другие решения

всем привет html атрибут формы onsubmit для проверки с использованием java-скрипта перед отправкой формы. Пожалуйста, просмотрите следующий пример, чтобы решить вашу проблему.

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

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

</body>
</html>

Это сделано для того, чтобы делать что-либо перед отправкой формы. Но вы могли бы использовать html5 require атрибут тоже.

0

Пример с вашим кодом для проверки на ник:

 <!-- Main jumbotron for a primary marketing message or call to action -->
<div class="jumbotron">
<div class="container">
<h1>Register</h1>
<form id="myform" role="form" method="post">
<div id="data-text">
<input id="nick" type="text" name="nick" placeholder="Nick" class="form-control" style="width: 250px;">
<input type="text" name="name" placeholder="Imię" class="form-control" style="width: 250px;">
<input type="text" name="surname" placeholder="Nazwisko" class="form-control" style="width: 250px;">
<input type="text" name="email" placeholder="Email" class="form-control" style="width: 250px;">
<input type="text" name="phone" placeholder="Telefon" class="form-control" style="width: 250px;">
<input type="text" name="password" placeholder="Hasło" class="form-control" style="width: 250px;">
<input type="text" name="repassword" placeholder="Powtórz hasło" class="form-control" style="width: 250px;">
</div>
<button type="submit" name='Proceed' value='register' class="btn btn-success">Zarejestruj</button>
</form>
<div id="err_msg"></div>
</div>
</div>

Javascript:

 $('#myform').on("submit", function() {
if(!$("#nick").val()) {
alert("Missing fields");
return false;
}

return true;
});

Тем не менее, вы все равно должны проверять фактически отправленные значения, используя $ _POST (если вы используете php)

0

Источник

Accepted Answer

<script language="javascript">
function validate(){
noError = TRUE;
var username = document.forms["myForm"]["fname"].value;
if(username==''){
noError = FALSE;
}

return noError;
}
</script>

<form role="form" name="myForm" method="post" onsubmit="return validate()">
<div id="data-text">
<input type="text" name="nick" placeholder="Nick" class="form-control" style="width: 250px;">
<input type="text" name="name" placeholder="Imię" class="form-control" style="width: 250px;">
<input type="text" name="surname" placeholder="Nazwisko" class="form-control" style="width: 250px;">
<input type="text" name="email" placeholder="Email" class="form-control" style="width: 250px;">
<input type="text" name="phone" placeholder="Telefon" class="form-control" style="width: 250px;">
<input type="text" name="password" placeholder="Hasło" class="form-control" style="width: 250px;">
<input type="text" name="repassword" placeholder="Powtórz hasło" class="form-control" style="width: 250px;">
</div>
<button type="submit" name='Proceed' value='register' class="btn btn-success">Zarejestruj</button>
</form>

0