javascript-フォームを送信せずにチェックしますか?
だから私はregister.phpである1つのページを持っています。このページには、ユーザーのサインアップに必要なさまざまな情報の3つのコンポーネントがあります。これらのコンポーネントは、Jqueryを使用して非表示および表示されます。最初のコンポーネントだけがサインアップに必要な情報を持っていますが、サインアップ/送信ボタンは3番目のコンポーネントにあります。
私が欲しいのは、最初のコンポーネントのフォームをチェックして、そのフォームが空であるか正しくない場合に、ユーザーが2番目のコンポーネントに移動できないようにすることです。フォームを送信せずにこれを行うにはどうすればよいですか?以下のような関数を呼び出してみましたが、情報が正しく取得されていないため動作しません。
function checkform(form){
if(this.name.value == '' && this.email.value == '' && this.phone.value == '' && this.email.value == '' && this.password.value == '' && 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>
答え :
解決:
これを試して:
$('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>
答え :
解決:
フォーム入力が入力されているか、最小の長さであるかを確認しようとしているように思えます。
あなたが説明したことについては、JavaScriptはまったく必要ないかもしれません。 HTMLは、すぐに使用できる基本的な検証をサポートしています。例えば:
<input type="password" minlength="8" required>
フォームを送信しようとして、この入力が空のままであるか、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>
この検証は完全にクライアント側で行われていることに注意してください。サーバー側でこの入力を確認する必要があります。
答え :
解決:
`
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>
同様の質問
私たちのウェブサイトで同様の質問で答えを見つけてください。