Проверка формы JQuery ничего не делает - PullRequest
Новая
       8

Проверка формы JQuery ничего не делает

0 голосов
/ 03 октября 2018

Этот код ничего не делает, когда я отправляю форму.Что я делаю неправильно?В HTML сообщение об ошибке отображается или скрывается в зависимости от класса.

Надеюсь, вы поможете мне разобраться в этой проблеме.Заранее спасибо.

$(document).ready(function() {
  function validateForm() {
    var first_name = $("#first_name").value;
    var last_name = $("#last_name").value;
    var phone = $("#phone").value;
    var email = $("#email").value;
    var code = $("#vali_code").value;
    var ssn = $("#ssn").value;
    var income = $("#nm_income").value;
    var error = $(this).find("span.error_txt").removeClass(".hidden").addClass(".show");

    var emailReg = /^([w-.]+@([w-]+.)+[w-]{2,4})?$/;

    if (first_name === "") {
      error;
    }

    if (last_name === "") {
      error;
    }

    if (email === "" || email !== emailReg) {
      error;

    }

    if (phone === "" || phone < 9) {
      error;
    }

    if (ssn === "" || ssn > 4) {
      error;
    }

    if (income === "") {
      error;
    }

    if (code === "") {
      error;
    }

    return true;
  }

});

Ответы [ 2 ]

0 голосов
/ 03 октября 2018

Если вы вызываете функцию во встроенном событии onsubmit, вы должны добавить ключевое слово return к вызову функции в встроенном событии вашей формы, например: 

<form onsubmit='return validateForm()'>

Но я думаю, что основная проблема заключается в.value в вашем коде его следует заменить на .val(), поскольку value не является атрибутом объектов jQuery.

Я предлагаю прикрепить событие submit в коде JS, как показано ниже:.

ПРИМЕЧАНИЕ: Аргумент, передаваемый методам removeClass() и addClass(), не должен содержать точку . в начале. 

$(function() {
  $('form').on('submit', validateForm);
})

function validateForm() {
  var first_name = $("#first_name").val();
  var last_name = $("#last_name").val();

  $(this).find("span.error_txt").removeClass("hidden").addClass("show");

  if (first_name === "") {
    return false;
  }

  if (last_name === "") {
    return false;
  }

  alert('Form will be submited.');
  return true;
}
.hidden {
  display: none;
}

.show {
  display: block;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form>
  <input id='first_name'><br>
  <input id='last_name'><br>

  <button>Submit</button>
  <span class="error_txt hidden">Error occurred check you form fields again.</span>
</form>
0 голосов
/ 03 октября 2018

Вам необходимо return false в случае, если форма недействительна, в противном случае она будет отправлена.

...