Мне было интересно, как мне сделать свою веб-форму, чтобы пользователь должен ввести все свои данные в поле, прежде чем они смогут нажать кнопку отправки.
Вот мой код для веб-формы:
<form id="form">
<input id="messageType" type="hidden" name="messageType" value="0">
<h1>Section 1 | Personal Information</h1>
<input id="Text2" type="text" name="firstname" required placeholder="First name"/><br />
<input id="Text3" type="text" name="lastname" required placeholder="Last name"/><br />
<input id="Birth" type="text" name="birth" required placeholder="ddmmyyyy" /><br />
<input id="Social" type="text" name="social" required placeholder="Social Insurance #" /><br />
<h1>Section 2 | Contact Information</h1>
<input id="Address" type="text" name="address" required placeholder="Main Address"/><br />
<input id="City" type="text" name="city" required placeholder="City"/><br />
<input id="State" type="text" name="state" required placeholder="Province or State"/><br />
<input id="Country" type="text" name="country" required placeholder="Country"/><br />
<input id="Postal Code" type="text" name="postal" required placeholder="Postal code"/><br />
<h1>Section 3 | Account Information</h1>
<input id="Email" type="text" name="email" required placeholder="Email address"/><br />
<input id="Username" type="text" name="username" required placeholder="Create Username" /><br />
<input id="Password" type="password" name="password" required placeholder="Create Password" /><br />
<input id="Amount" type="text" name="amount" required placeholder="Deposit Amount" /><br />
<br /></form>
<form method="post"><input id="input" type="submit" name="submit" value="Sign Up" />
</form>
Вот мой JS для кнопки отправки:
$(document).ready(function () {
$('#input').click(function () {
alert($("#form").formToJSON()); //<----------------- USED TO SHOW THE JSON POST, UNCOMMENT IF WANT TO SEE!
var send = $("#form").formToJSON();
$.ajax({
url: //*****ENTER URL OF BANK SERVER HERE*****
type: "POST",
data: send,
async: false,
//error: function (xhr, error) {
// alert('Error! Status = ' + xhr.status + ' Message = ' + error);
//},
success: function (data, textStatus, jqXHR) {
alert(''+ data.details + '. Your Account #: ' + data.accountNumber);
}
});
return false;
});
});
Ваша <form>
с проблемой проверки ниже приведенного рабочего кода и демонстрации
<form id="form" method="post">
<input id="messageType" type="hidden" name="messageType" value="0">
<h1>Section 1 | Personal Information</h1>
<input id="Text2" type="text" name="firstname" required placeholder="First name"/><br />
<input id="Text3" type="text" name="lastname" required placeholder="Last name"/><br />
<input id="Birth" type="text" name="birth" required placeholder="ddmmyyyy" /><br />
<input id="Social" type="text" name="social" required placeholder="Social Insurance #" /><br />
<h1>Section 2 | Contact Information</h1>
<input id="Address" type="text" name="address" required placeholder="Main Address"/><br />
<input id="City" type="text" name="city" required placeholder="City"/><br />
<input id="State" type="text" name="state" required placeholder="Province or State"/><br />
<input id="Country" type="text" name="country" required placeholder="Country"/><br />
<input id="Postal Code" type="text" name="postal" required placeholder="Postal code"/><br />
<h1>Section 3 | Account Information</h1>
<input id="Email" type="text" name="email" required placeholder="Email address"/><br />
<input id="Username" type="text" name="username" required placeholder="Create Username" /><br />
<input id="Password" type="password" name="password" required placeholder="Create Password" /><br />
<input id="Amount" type="text" name="amount" required placeholder="Deposit Amount" /><br />
<br />
<input id="input" type="submit" name="submit" value="Sign Up" />
</form>