Проверить форму, не отправляя ее?

ProgramBox

Проверить форму, не отправляя ее?

Post author:admin
Запись опубликована:9 января, 2022
Post category:Вопросы по программированию

#javascript #php #html #jquery #ajax

Вопрос:

Итак, у меня есть одна страница, которая register.php. Эта страница содержит 3 компонента различной информации, необходимой для регистрации пользователя. Эти компоненты скрыты и отображаются с помощью Jquery. Только первый компонент содержит информацию, необходимую для регистрации, НО кнопка регистрация/отправить находится на 3-м компоненте.

Я хочу проверить форму на первом компоненте, чтобы в случае, если она пуста/неверна, не позволять пользователю переходить ко второму компоненту. Как я могу это сделать, не отправляя форму? Я попытался вызвать функцию, подобную приведенной ниже, но она не работает, так как неправильно извлекает информацию.

 function checkform(form){
    if(this.name.value == '' amp;amp; this.email.value == '' amp;amp; this.phone.value == '' amp;amp; this.email.value == '' amp;amp; this.password.value == '' amp;amp; this.pasword_conf.value == ''){
        if (this.password.value == this.password_conf.value){
            if (this.password.value > 8){
                $("div.component1").hide();
                $("div.component2").show();
            }else{
                alert("La contraseña debe ser mayor a 8");
            }
        }else{  
            alert("Las contraseñas deben ser iguales");
        }
    }else{
        alert("Por favor, complete todos los espacios");
    }
}

Я нашел несколько примеров в Интернете с использованием AJAX, но большинство из них проверили форму, а затем автоматически отправили ее, что не то, что я хочу.

Правка: Это HTML-код.

   <form action='register.php' method='POST' id='user-information'>
    <input type='text' class='form-control' placeholder='Nombre' name='name' id='name'/>
    <input type='text' class='form-control' placeholder='Correo' name='email' id='email'/>
    <input type='text' class='form-control' placeholder='Teléfono' name='phone' id='phone'/>
    <input type='password' class='form-control' placeholder='Contraseña' name='password' id='password'/>
    <input type='password' class='form-control' placeholder='Confirma contraseña' name='password_conf' id='password_conf'/>

  <button type='button' id='next-register' onclick='checkform(this.form)'>
    Siguiente
  </button>

  </form>

1. Вы захотите != в этой первой проверке, а не == . И там опечатка this.pasword_conf.value отсутствует s . Как вы назначили checkForm куратора? Вы указали это, как onclick в кнопке «Отправить»? Используйте JS, чтобы добавить его в качестве прослушивателя событий? Пожалуйста, добавьте соответствующий код. В общем, AJAX используется для отправки формы на сервер без перехода к результату, это, скорее всего, не то, что вы ищете. Нам нужно увидеть соответствующий HTML-код.

2. Я предполагаю, что основная проблема заключается в том, что <кнопка> внутри <кнопки><формы> всегда будет отправлять форму, если вы не добавите в нее <форму> type="button" (или не предотвратите отправку с помощью кода JavaScript)

3. Просто добавил html-форму

4. Правильно, так как же вы связали кнопку и функцию?

5. @ChrisG Ты прав, я проверю это

Ответ №1:

Попробуй это:

 $('form').on('submit',function () {
        var form = $(this);
        var validate = true;
        $.each(form.find('input:not([type="submit"])'), function (i, el) { 
            if($(el).val() == '') validate = false;
        });
        if (!validate) {
            alert("Por favor, complete todos los espacios");
            return false;
        }
        var password = form.find('input[name="password"]').val();
        var password_conf = form.find('input[name="password_conf"]').val();
        if (password.length < 8 ) {
            alert("La contraseña debe ser mayor a 8");
            return false;
        }


        if (password !== password_conf) {
            alert("Las contraseñas deben ser iguales");
            return false;            
        }

        $("div.component1").hide();
        $("div.component2").show();

        return false;
    });

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<div class="component1">    
<form action='register.php' method='POST' id='user-information'>
    <input type='text' class='form-control' placeholder='Nombre' name='name' id='name' />
    <input type='text' class='form-control' placeholder='Correo' name='email' id='email' />
    <input type='text' class='form-control' placeholder='Teléfono' name='phone' id='phone' />
    <input type='password' class='form-control' placeholder='Contraseña' name='password' id='password' />
    <input type='password' class='form-control' placeholder='Confirma contraseña' name='password_conf'
        id='password_conf' />
    <button id='next-register'>
        Siguiente
    </button>
</form>
</div>
<div class="component2" style="display:none;">This is component 2</div>

Ответ №2:

Используйте плагин проверки jQuery. Это будет очень полезно, и вы можете проверить форму перед отправкой, и она очень проста в использовании.

Ответ №3:

Мне кажется, что вы пытаетесь проверить, заполнены ли входные данные вашей формы/имеют ли они минимальную длину.

Для того, что вы описали, вам может вообще не понадобиться много JavaScript. HTML поддерживает базовую проверку «из коробки». Например.:

 <input type="password" minlength="8" required>

Если вы попытаетесь отправить форму, а этот ввод останется пустым или будет содержать менее 8 символов, он не будет отправлен. Ошибка также отображается рядом с элементом ввода, указывающим, что пошло не так.

Единственное, для чего вам может понадобиться JavaScript, — это проверка соответствия двух введенных вами паролей. Вы могли бы попробовать это:

 <script>
  function submitForm(e) {
    const password = document.getElementById('password').value;
    const confirmation = document.getElementById('passwordConfirmation').value;

    if (password !== confirmation) return false;
  }
</script>

<form onsubmit="return submitForm()">
    <input type="password" id="password">
    <input type="password" id="passwordConfirmation">
    <input type="submit" value="Submit">
</form>

Обратите внимание, что эта проверка выполняется исключительно на стороне клиента. Вы все равно должны проверить этот ввод на стороне сервера.

1. Да, я мог бы использовать это, но опять же, отправка выполняется в последнем компоненте. К тому времени, когда пользователь доберется туда, он не увидит форму и не будет знать, почему она не работает

Ответ №4:

 const form = $('#step-1');
$('#step-2').hide();

const validate = (values) => {
    const errors = [];
    // Add validations
    if (!values[0].value) errors.push('Name is empty');
    if (!values[1].value) errors.push('Email is empty');

    return errors;
}

$('#step-1-next').on('click', function(e) {

    const values = form.serializeArray();
    const errors = validate(values);
   
    if (!errors.length) {
        // Show step 2
        form.hide();
        $('#step-2').show();
    } else {
        // Display errors 
        errors.forEach(err => {
            console.log('error', err);
        });
    }

    e.preventDefault();
})


$('#step-2-sutmit').on('click', function(e) {
    const values = form.serializeArray();
    console.log('values', values);
    form.submit();
    e.preventDefault();
});

    

 <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
        <form id="step-1" action='register.php' method='POST'>
            <input type='text' class='form-control' placeholder='Nombre' name='name' id='name' />
            <input type='text' class='form-control' placeholder='Correo' name='email' id='email' />
            <input type='text' class='form-control' placeholder='Teléfono' name='phone' id='phone' />
            <input type='password' class='form-control' placeholder='Contraseña' name='password' id='password' />
            <input type='password' class='form-control' placeholder='Confirma contraseña' name='password_conf' id='password_conf' />
            <button id="step-1-next" type="button">Next</button>
        </form>
        <div id="step-2">
            <div>
                Step 2
            </div>
            <button id="step-2-sutmit" type="button">Next</button>
        </div>

Проверьте логику отправки

Метки: не отправляя ее?, Проверить форму