JQuery остановить отправку формы, если текстовое поле пусто или не почтовый индекс

Question

Я очень новичок в использовании jQuery, но я знаю, что это будет лучшее приложение для того, что мне нужно. Я построил небольшую форму с одним полем ввода текста, который запрашивает почтовый индекс. Форма работает нормально, но я хочу убедиться, что поле имеет значение, и что это определенный формат (почтовый индекс). Если нет, я бы хотел остановить SUBMIT на месте и изменить класс текстового поля.

<form action="url" class="form-inline" method="post" accept-charset="utf-8">
    <label for="zipcode">Zipcode</label>
    <input type="text" name="zipcode" value="" maxlength="5" placeholder="" class="form-control">
    <button type="submit" class="btn btn-primary btn-xs">Search</button>
</form>

Я не хочу отправлять форму с помощью jQuery, я просто хочу проверить ее перед отправкой ACTION

Answer 1

Во-первых, самый простой способ отключить отправку формы перед проверкой - добавить к кнопке атрибут disabled и удалить его только после завершения проверки. Если вы идете по этому пути, вы можете использовать прослушиватель событий keyup в поле ввода, чтобы проверить валидацию и, соответственно, активировать кнопку отправки. Что касается проверки, простое регулярное выражение для проверки должно подойти, если вас интересуют только американские почтовые индексы.

const $zipInput = $('input[name=zipcode]')
const $submit = $('button[type=submit]')

function validate(input) {
  const value = input.currentTarget.value
  const regex = /[0-9]{5}/;
  
  if (!regex.test(value)) {
    $submit.prop('disabled', true)
  } else {
    $submit.prop('disabled', false)
  } 
}

$zipInput.on('keyup', function(input) {
  const value = input.currentTarget.value
  
  if (value.length > 4) {
    validate(input)
  } else {
    $submit.prop('disabled', true)
  }
})

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form action="url" class="form-inline" method="post" accept-charset="utf-8">
    <label for="zipcode">Zipcode</label>
    <input type="text" name="zipcode" value="" maxlength="5" placeholder="" class="form-control">
    <button disabled type="submit" class="btn btn-primary btn-xs">Search</button>
</form>

Answer 2

Привет в зависимости от изменения почтового индекса страны, Если вы используете плагин проверки jquery, добавьте этот метод help help

jQuery.validator.addMethod("zipUS", function(value, element) {
    return /(^\d{5}$)|(^\d{5}-\d{4}$)/.test(value);
}, "Please specify a valid US zip code.");


$(".form-inline").validate({
    rules: {
        // rules,
        'zipcode': {
            required: true,
            zipUS: true 
        }
    },
   });