javascript-フォームを送信せずにチェックしますか？

$('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;
    });Copy code

<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>Copy code

解決：

JQuery検証プラグインを使用します。これは非常に便利で、送信する前にフォームを検証でき、非常に使いやすいです。

解決：

フォーム入力が入力されているか、最小の長さであるかを確認しようとしているように思えます。

あなたが説明したことについては、JavaScriptはまったく必要ないかもしれません。 HTMLは、すぐに使用できる基本的な検証をサポートしています。例えば：

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

フォームを送信しようとして、この入力が空のままであるか、8文字未満の場合、フォームは送信されません。何がうまくいかなかったかを示すエラーも入力要素の横に表示されます。

JavaScriptが必要になる可能性があるのは、2つのパスワード入力が一致するかどうかを確認することだけです。あなたはこれを試すことができます：

<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>Copy code

この検証は完全にクライアント側で行われていることに注意してください。サーバー側でこの入力を確認する必要があります。

解決：

`

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();
});Copy code

<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>Copy code

同様の質問

私たちのウェブサイトで同様の質問で答えを見つけてください。