Отметьте отмеченное поле как обязательное в HTML при отправке формы с использованием JQuery

Question

Я использую функцию Jquery .submit() для отправки формы с использованием JQuery.Но у меня есть некоторые поля, помеченные как required в HTML.Как мне использовать функцию .submit(), чтобы проверить обязательное поле перед отправкой формы?

‌

вот код

<script>
function submit() {
    $("form").submit();
}

function signup() {
    alert("You're going to sign up");
}
</script>

<form action="JavaScript:void(0);" onsubmit="signup()" method="post">
    <div class="input">
        <label for="email">Email:</label>
        <input required="" id="email"/>
    </div>
    <div class="input">
        <label for="password">Password:</label>
        <input required="" type="password" id="password"/>
    </div>

    <a class="submit" href="JavaScript:submit();">Sign Up</a>
    <button type="submit" class="none_display"></button>
</form>

Мне нужно отправить свою формуиспользование тега a из-за изменения стиля в некоторых браузерах для тегов button и input.

Answer 1

Во-первых, немного странно, что у вас есть метод submit (), который вы вызываете inline, который переворачивает и отправляет форму, который затем выполняет свой встроенный метод signup (), который затем действительно работает.Просто вызовите регистрацию вместо submit ().

Но для вашего актуального вопроса.

$(':input[required]').filter(function(){ return !this.value.trim() })

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

В приведенном ниже примере немного изменена логика, так что кнопка отправки фактически отображается, но стилизована в виде ссылки.

$('form').on('submit', function(e){
  e.preventDefault();
  var blankRequiredFieldsExist = $(e.target).find(':input[required]').filter(function(){
    return !this.value.trim();
  }).length;
  
  if (!blankRequiredFieldsExist) {
    alert("You're going to sign up");
  }
});

.buttonAsLink {
  border: 0;
  background-color: inherit;
  padding: 0;
  font-family: inherit;
  font-size: inherit;
  color: blue;
  text-decoration: underline;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<form method="post">
    <div class="input">
        <label for="email">Email:</label>
        <input required id="email"/>
    </div>
    <div class="input">
        <label for="password">Password:</label>
        <input required type="password" id="password"/>
    </div>

    <button type="submit" class="buttonAsLink">Sign Up</button>
</form>

Answer 2

Вы можете сделать кнопку отправки и установить display: none; для этого.затем напишите некоторую функцию в jquery, чтобы щелкнуть по кнопке отправки, когда пользователь щелкнет по ссылке привязки

<form action="JavaScript:void(0);" onsubmit="signup()" method="post">
  <input type="text" required="yes" />
  <input type="submit" style="display: none;" id="mysubmit" />
  <a href="JavaScript:void(0);" onclick='$("#mysubmit").click();'>Submit</a>
</form>

Answer 3

У вас происходит несколько ненужных вещей.

Вам не нужно action="JavaScript:void(0);" в форме.

Удалить <a class="submit" href="JavaScript:submit();">Sign Up</a>

function signup() {
    alert("You're going to sign up");
}

<form onsubmit="signup()">
    <div class="input">
        <label for="email">Email:</label>
        <input required="" id="email"/>
    </div>
    <div class="input">
        <label for="password">Password:</label>
        <input required="" type="password" id="password"/>
    </div>
    <button type="submit" class="none_display">Sign up</button>
</form>