Блог

Я хочу использовать проверку jquery для простой формы, используя встроенный метод проверки, такой как required и email.

Вот моя форма

 <form id="setup-company" class="form-horizontal form-rest validator" action="{{$updatePath}}">
    <div class="form-group">
        <label for="name" class="col-sm-6 control-label" style="font-size: 12px;text-transform:uppercase">Nama Institusi *</label>
        <div class="col-sm-12">
            <input type="text" class="form-control" name="name" value="{{$company->name}}" style="width: 100%;" required>
        </div>
    </div>
    <div class="form-group">
        <label for="abbreviation" class="col-sm-6 control-label" style="font-size: 12px;text-transform:uppercase">Singkatan</label>
        <div class="col-sm-12">
            <input type="text" class="form-control" name="abbreviation" value="{{$company->abbreviation}}" style="width: 100%;">
        </div>
    </div>
    <div class="form-group">
        <label for="phone" class="col-sm-6 control-label" style="font-size: 12px;text-transform:uppercase">No. Telp</label>
        <div class="col-sm-12">
            <input type="number" class="form-control" minlength="10" maxlength="12" name="phone" value="{{$company->phone}}">
        </div>
    </div>
    <div class="form-group">
        <label for="email" class="col-sm-6 control-label" style="font-size: 12px;text-transform:uppercase">Email</label>
        <div class="col-sm-12">
            <input type="email" class="form-control" name="email" value="{{$company->email}}">
        </div>
    </div>
    <button style="float:right;" type="submit" class="btn btn-sm btn-success btn-raised rippler rippler-inverse edit-row">
        SIMPAN
    </button>
</form>
 

В javascript я инициирую проверку jquery следующим образом.

  $('.form-rest').unbind().submit(function(e) {
        e.preventDefault();
        var $form = $(this);
        // check if the input is valid
        if (!$form.valid())
            return false;
});
 

Но когда я пытаюсь это сделать, он показывает проверку HTML следующим образом

Когда я заполняю недопустимый ввод для phone (который является третьим вводом), кажется, что проверка jquery работает правильно. И когда я пытаюсь заполнить пустой ввод для первого ввода, сообщение об ошибке пришло из проверки jquery следующим образом.

В чем причина этого?

Наличие required атрибута вполне нормально. Вам просто нужно сообщить браузеру, что вы хотите пропустить проверку по умолчанию, добавив novalidate атрибут к элементу формы.

Атрибут novalidate является логическим атрибутом. Если он присутствует, он указывает, что данные формы (входные данные) не должны проверяться при отправке.