Код проверки формы JQuery и preventdefault не работают

Я создал форму регистрации начальной загрузки, и следующий код jQuery не работает. Несмотря на e.preventDefault(), форма все равно отправляется, и div с сообщением об ошибке тоже не появляется.

Кроме того, у меня есть форма входа с почти таким же кодом, и она работает правильно.

$(function(){
  
$("#signup-form").on("submit",function(e){
  
var email=$("#emal");
var name=$("#username");
var ps=$("#password");
var psr=$("#passwordrepeat");
var error=$("#errormessage");
var errorcontainer=$("#errordiv");

if (name.val()= = "" && ps.val()= = "" && email.val()= = "" && psr.val()= = ""){
	error.text("Fields are empty!");
	errorcontainer.removeClass("d-none");
	errorcontainer.addClass("errorbg");
	name.addClass("error");
	ps.addClass("error");
	email.addClass("error");
	psr.addClass("error");
	e.preventDefault();
}


});
});

body{
		background:#9ec3ff !important;
	}

	.container{
		background:#9ec3ff;
	}
	
	.col-lg-6{
		margin:auto;
	}
	
	#facebook{
		background:#568ac2 !important;
		border:none;
		border-radius:2px !important;
	}
	#twitter{
		background:#6aabdb;
		border:none;
		border-radius:2px !important;
	}
	#google{
		background:#cb3d2f;
		border:none;
		border-radius:2px !important;
	}
	#signupform{
		box-shadow:0px 0px 10px #2e51a2;
	}
	#signupform:hover{
		box-shadow:0px 0px 50px #2e51a2;
		transition:0.5s;
	}
  .error{
		box-shadow:0px 0px 10px #cb3d2f;
	}
	.errorbg{
		border:2px solid red;
		background:#fae3e3;
	}

<html>
  <head>
<meta name = "viewport" content = "width=device-width, initial-scale=1">
 
	<script src = "https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity = "sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin = "anonymous"></script>
<script src = "https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.6/umd/popper.min.js" integrity = "sha384-wHAiFfRlMFy6i5SRaxvfOCifBUQy1xHdJ/yoi7FRNXMRBu5WHdZYu1hA6ZOblgut" crossorigin = "anonymous"></script>
<script src = "https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/js/bootstrap.min.js" integrity = "sha384-B0UglyR+jN6CkvvICOB2joaf5I4l3gm9GU6Hc1og6Ls7i6U/mkkaduKaBhlAXv9k" crossorigin = "anonymous"></script>
<script type = "text/javascript" src = "signup.js"></script>
<script type = "text/javascript" src = "jquery.sticky.js"></script>
<link rel = "stylesheet" href = "https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/css/bootstrap.min.css" integrity = "sha384-GJzZqFGwb1QTTN6wy59ffF1BuGJpLSa9DkKMp0DgiMDm4iYMj70gZWKYbI706tWS" crossorigin = "anonymous">
<link rel='stylesheet' href='https://use.fontawesome.com/releases/v5.6.3/css/all.css' integrity='sha384-UHRtZLI+pbxtHCWp1t77Bi1L4ZtiqrqD80Kn4Z8NTSRyMA2Fd33n5dQ8lWUE00s/' crossorigin='anonymous'>
<link rel = "stylesheet" type = "text/css" href = "signup.css">
<link rel = "stylesheet" href = "https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<link href = "https://fonts.googleapis.com/icon?family=Material+Icons" rel = "stylesheet">
<link rel = "stylesheet" type = "text/css" href = "animate.css">
  </head>
  <body>
<div class = "container">
  
<div id = "errordiv" class = "m-auto text-danger font-weight-bold text-center col-lg-6 col-md-8 d-none">
  
  <span id = "errormessage"></span>

</div>

<div class = "row mt-5">
  <div id = "signupform" class = "col-lg-6 col-md-8 border border-primary text-center">
    <span class = "m-auto"><strong>Sign Up with</strong></span><br><br>
    <div class = "m-auto col-xl-10 col-lg-11 col-md-11 col-sm-10">
      <button type = "button" id = "facebook" class = "btn btn-primary float-left"><img class = "mr-3" src = "https://i.imgur.com/9FWWsfx.png"/>Facebook</button>
      <button type = "button" id = "twitter" class = "btn btn-primary float-center"><img class = "mr-3" src = "https://i.imgur.com/LXFDLev.png"/>Twitter</button>
      <button type = "button" id = "google" class = "btn btn-primary float-right"><img class = "mr-3" src = "https://i.imgur.com/AN3CMg9.png"/>Google+</button>
    </div>
    <br>
    <span class = "m-auto">Or</span><br>
    <br>
<form id = "signup-form">
  <fieldset class = "form-group">
    <label for = "formGroupExampleInput"><strong>E-mail</strong></label>
    <input type = "text" class = "form-control w-75 m-auto" id = "email" placeholder = "Enter email" name = "signup-email">
  </fieldset>
  <fieldset class = "form-group">
    <label for = "formGroupExampleInput2">Username</label>
    <input type = "text" class = "form-control w-75 m-auto" id = "username" placeholder = "Choose username" name = "signup-username">
  </fieldset>
  <fieldset class = "form-group">
    <label for = "formGroupExampleInput2">Password</label>
    <input type = "password" class = "form-control w-75 m-auto" id = "password" placeholder = "Enter password" name = "signup-password">
  </fieldset>
 <fieldset class = "form-group">
    <label for = "formGroupExampleInput2">Password again</label>
    <input type = "password" class = "form-control w-75 m-auto" id = "passwordrepeat" placeholder = "Enter password" name = "signup-passwordrepeat">
  </fieldset>
   
        <div class = "checkbox">
          <label>
            <input type = "checkbox"> I have read and agree to the <a href = "#">Term of Service</a> and <a href = "#">Privacy Policy</a>
          </label>
      </div>
    <input type = "submit" name = "signup" class = "btn btn-primary mb-3" value = "Create Account"/>
  
</form>

  </div>
  
</div>
</div>
</body>
</html>

javascript jquery

23.01.2019 18:56

Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией

В JavaScript одним из самых запутанных понятий является поведение ключевого слова "this" в стрелочной и обычной функциях.

Концепция локализации и ее применение в приложениях React ⚡️

Локализация - это процесс адаптации приложения к различным языкам и культурным требованиям. Это позволяет пользователям получить опыт, соответствующий...

Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer

В настоящее время производительность загрузки веб-сайта имеет решающее значение не только для удобства пользователей, но и для ранжирования в...

Безумие обратных вызовов в javascript [JS]

Здравствуйте! Юный падаван 🚀. Присоединяйся ко мне, чтобы разобраться в одной из самых запутанных концепций, когда вы начинаете изучать мир...

Система управления парковками с использованием HTML, CSS и JavaScript

Веб-сайт по управлению парковками был создан с использованием HTML, CSS и JavaScript. Это простой сайт, ничего вычурного. Основная цель -...

JavaScript Вопросы с множественным выбором и ответы

Если вы ищете платформу, которая предоставляет вам бесплатный тест JavaScript MCQ (Multiple Choice Questions With Answers) для оценки ваших знаний,...

Ответы 2

Используйте preventdefault поверх функции. Существует набор функций, которые запускаются в фоновом режиме при вызове отправки. В Javascript, когда функция запускается, она никак не может остановиться. Он останавливается только тогда, когда выдает ошибку или возвращает значение. Использование preventdefalut в конце концов не помогает, потому что уже слишком поздно, и функция отправки начала работать. При размещении в верхней части function он явно говорит, что функции отправки по умолчанию не должны запускаться.

$(function(){
  
$("#signup-form").on("submit",function(e){
  e.preventDefault();
var email=$("#emal");
var name=$("#username");
var ps=$("#password");
var psr=$("#passwordrepeat");
var error=$("#errormessage");
var errorcontainer=$("#errordiv");

if (name.val()= = "" && ps.val()= = "" && email.val()= = "" && psr.val()= = ""){
	error.text("Fields are empty!");
	errorcontainer.removeClass("d-none");
	errorcontainer.addClass("errorbg");
	name.addClass("error");
	ps.addClass("error");
	email.addClass("error");
	psr.addClass("error");
	
}


});
});

body{
		background:#9ec3ff !important;
	}

	.container{
		background:#9ec3ff;
	}
	
	.col-lg-6{
		margin:auto;
	}
	
	#facebook{
		background:#568ac2 !important;
		border:none;
		border-radius:2px !important;
	}
	#twitter{
		background:#6aabdb;
		border:none;
		border-radius:2px !important;
	}
	#google{
		background:#cb3d2f;
		border:none;
		border-radius:2px !important;
	}
	#signupform{
		box-shadow:0px 0px 10px #2e51a2;
	}
	#signupform:hover{
		box-shadow:0px 0px 50px #2e51a2;
		transition:0.5s;
	}

<html>
  <head>
<meta name = "viewport" content = "width=device-width, initial-scale=1">
 
	<script src = "https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity = "sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin = "anonymous"></script>
<script src = "https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.6/umd/popper.min.js" integrity = "sha384-wHAiFfRlMFy6i5SRaxvfOCifBUQy1xHdJ/yoi7FRNXMRBu5WHdZYu1hA6ZOblgut" crossorigin = "anonymous"></script>
<script src = "https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/js/bootstrap.min.js" integrity = "sha384-B0UglyR+jN6CkvvICOB2joaf5I4l3gm9GU6Hc1og6Ls7i6U/mkkaduKaBhlAXv9k" crossorigin = "anonymous"></script>
<script type = "text/javascript" src = "signup.js"></script>
<script type = "text/javascript" src = "jquery.sticky.js"></script>
<link rel = "stylesheet" href = "https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/css/bootstrap.min.css" integrity = "sha384-GJzZqFGwb1QTTN6wy59ffF1BuGJpLSa9DkKMp0DgiMDm4iYMj70gZWKYbI706tWS" crossorigin = "anonymous">
<link rel='stylesheet' href='https://use.fontawesome.com/releases/v5.6.3/css/all.css' integrity='sha384-UHRtZLI+pbxtHCWp1t77Bi1L4ZtiqrqD80Kn4Z8NTSRyMA2Fd33n5dQ8lWUE00s/' crossorigin='anonymous'>
<link rel = "stylesheet" type = "text/css" href = "signup.css">
<link rel = "stylesheet" href = "https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<link href = "https://fonts.googleapis.com/icon?family=Material+Icons" rel = "stylesheet">
<link rel = "stylesheet" type = "text/css" href = "animate.css">
  </head>
  <body>
<div class = "container">
  
<div id = "errordiv" class = "m-auto text-danger font-weight-bold text-center col-lg-6 col-md-8 d-none">
  
  <span id = "errormessage"></span>

</div>

<div class = "row mt-5">
  <div id = "signupform" class = "col-lg-6 col-md-8 border border-primary text-center">
    <span class = "m-auto"><strong>Sign Up with</strong></span><br><br>
    <div class = "m-auto col-xl-10 col-lg-11 col-md-11 col-sm-10">
      <button type = "button" id = "facebook" class = "btn btn-primary float-left"><img class = "mr-3" src = "https://i.imgur.com/9FWWsfx.png"/>Facebook</button>
      <button type = "button" id = "twitter" class = "btn btn-primary float-center"><img class = "mr-3" src = "https://i.imgur.com/LXFDLev.png"/>Twitter</button>
      <button type = "button" id = "google" class = "btn btn-primary float-right"><img class = "mr-3" src = "https://i.imgur.com/AN3CMg9.png"/>Google+</button>
    </div>
    <br>
    <span class = "m-auto">Or</span><br>
    <br>
<form id = "signup-form">
  <fieldset class = "form-group">
    <label for = "formGroupExampleInput"><strong>E-mail</strong></label>
    <input type = "text" class = "form-control w-75 m-auto" id = "email" placeholder = "Enter email" name = "signup-email">
  </fieldset>
  <fieldset class = "form-group">
    <label for = "formGroupExampleInput2">Username</label>
    <input type = "text" class = "form-control w-75 m-auto" id = "username" placeholder = "Choose username" name = "signup-username">
  </fieldset>
  <fieldset class = "form-group">
    <label for = "formGroupExampleInput2">Password</label>
    <input type = "password" class = "form-control w-75 m-auto" id = "password" placeholder = "Enter password" name = "signup-password">
  </fieldset>
 <fieldset class = "form-group">
    <label for = "formGroupExampleInput2">Password again</label>
    <input type = "password" class = "form-control w-75 m-auto" id = "passwordrepeat" placeholder = "Enter password" name = "signup-passwordrepeat">
  </fieldset>
   
        <div class = "checkbox">
          <label>
            <input type = "checkbox"> I have read and agree to the <a href = "#">Term of Service</a> and <a href = "#">Privacy Policy</a>
          </label>
      </div>
    <input type = "submit" name = "signup" class = "btn btn-primary mb-3" value = "Create Account"/>
  
</form>

  </div>
  
</div>
</div>
</body>
</html>

Это был бы лучший ответ, если бы он сказал, что Зачем, помещающий его в верхнюю часть функции, лучше, чем текущее размещение.

— 23.01.2019 19:01

23.01.2019 18:59

Просто используйте return false;, когда проверка не пройдена (и preventDefault тоже) как показано ниже:

$(function(){

$("#signup-form").on("submit",function(e){

var email=$("#emal");
var name=$("#username");
var ps=$("#password");
var psr=$("#passwordrepeat");
var error=$("#errormessage");
var errorcontainer=$("#errordiv");

if (name.val()= = "" && ps.val()= = "" && email.val()= = "" && psr.val()= = ""){
    error.text("Fields are empty!");
    errorcontainer.removeClass("d-none");
    errorcontainer.addClass("errorbg");
    name.addClass("error");
    ps.addClass("error");
    email.addClass("error");
    psr.addClass("error");
    e.preventDefault();
    return false; // return false here to disallow from for submitting
}


});
});

23.01.2019 19:18

Другие вопросы по теме

Попытка создать таблицу HTML и заполнить тег выбора теми же данными JSON

Ajax отправляет несколько/дублирующих вызовов по событию клика

Попытка открыть модальное окно при нажатии строки данных

Изменить предварительно загруженный контент [AJAX]

Data-image-src не отображает изображение параллакса

Таблица построения Javascript

Два экземпляра jQuery timepicker

Javascript анализирует HTML и находит элементы

Преобразование локальных данных JSON в таблицу табуляции

Ошибка проверки при отправке текстовой области летней заметки

Код проверки формы JQuery и preventdefault не работают

Ответы 2

Другие вопросы по теме

Похожие вопросы