Должен ли я подтвердить свою форму дважды?

0

Мой код отлично работает здесь.
Но проблема в том, что я хочу добавить некоторую проверку кода, чтобы форма не могла быть отправлена, если что-то не так в коде. Вот код, который я добавил:

Код JQuery:

 var user = document.getElementById('u');
var email = document.getElementById('em');
var pass1 = document.getElementById('p1');
var pass2 = document.getElementById('pa2');
function isEmpty(input) {
  if (input.value == "" || input.value == null) {
    return true;
  } else {
    return false;
  }
}

function validateform() {
  if(isEmpty(user) || isEmpty(email) || isEmpty(pass1) || isEmpty(pass2))
  {
    alert("All fields are required.");
    $("#form").submit(function(event) {
      event.preventDefault();
    });

    if(isEmpty(user))
    {  
      user.focus();
    }
    else if(isEmpty(email))
    {  
      email.focus();
    }
    else if(isEmpty(pass1))
    {  
      pass1.focus();
    }
    else if(isEmpty(pass2))
    {  
      pass2.focus();
    }
  }
}

Я также добавил идентификатор к моей форме:

<form action="m.php" method="post" id="form">

Я также добавил onsubmit здесь:

<input name="submit" type='submit' value='Submit' onsubmit="validateform()">

но он не работает, страница просто перемещается в m.php даже если все поля пустые. что мне делать? должен ли я установить плагин проверки подлинности jquery и проверить дважды?

редактировать
Вот демонстрация

  • 2
    Нет, вы должны сделать свою проверку работоспособности с первого раза (:
  • 0
    @oGeez, так что не так с моей проверкой здесь, я не получаю никаких ошибок!
Показать ещё 2 комментария
Теги:
validation
forms

2 ответа

1
Лучший ответ

Не нужно проверять дважды.

JS:

function isEmpty(input) {
    return $.trim(input.value) == "";
}

function validateform() {
    var user = document.getElementById('u');
    var email = document.getElementById('em');
    var pass1 = document.getElementById('p1');
    var pass2 = document.getElementById('pa2');

    if(isEmpty(user) || isEmpty(email) || isEmpty(pass1) || isEmpty(pass2))
        alert("All fields are required.");

    if(isEmpty(user)){
        user.focus();
        return false;
    }else if(isEmpty(email)){
        email.focus();
        return false;
    }else if(isEmpty(pass1)){
        pass1.focus();
        return false;
    }else if(isEmpty(pass2)){
        pass2.focus();
        return false;
    }
    return true;
}

$('form#myForm').submit(function(e){
    e.preventDefault();
    if( validateform() ) //just validate once!
        this.submit(); //and then submit once;
    return false;
});

HTML:

<form action="m.php" method="post" id="myForm">
    .....
    ......Other form settings....
    .....
    <input name="submit" type='submit' value='Submit'>
</form>
Поделиться
  • 0
    спасибо, это сработало, можете ли вы объяснить, что вы сделали?
  • 0
    @ user689: на самом деле, что вы хотите знать? Я только что обновил ваш код! Пожалуйста, спросите подробно, чтобы я мог ответить :)
Показать ещё 8 комментариев
2

После того, как вы проверите, пустое ли поле, если вы return false; то от не будет подчиняться.
Форма на примере.

JavaScript

function validateform() {
    if(isEmpty(user))
    {  
        user.focus();
        return false;
    }
    else if(isEmpty(email))
    {  
        email.focus();
        return false;
    }
    else if(isEmpty(pass1))
    {  
        pass1.focus();
        return false;
    }
    else if(isEmpty(pass2))
    {  
        pass2.focus();
        return false;
    }
}

Ваш onsubmit должен быть на вашей форме, а не на вашей кнопке.
HTML

<form action="m.php" method="post" id="form" onsubmit="validateform()">
<input name="submit" type='submit' value='Submit' >
Поделиться
  • 0
    Я пробовал это, прежде чем задавать вопрос, и сейчас, но он все еще не работает, я должен удалить event.preventdefault ();
  • 0
    @ user689 да, чтобы ваш метод validateform был похож на мой
Показать ещё 3 комментария

Ещё вопросы

Сообщество Overcoder
Наверх
Меню