関数検証フォームがその関数で true を返す場合に送信する Web フォームがあります。usernamecheck と呼ばれる別の関数が true を返す場合、validateform 関数を true に返すという if ステートメントを作成しました。ボタンをクリックしてユーザー名を確認しない限り、フォームを送信したくありません。私はこれを最善の方法で書いていないことを知っています。理解していただければ幸いです
<!-- Signup Form -->
<form name='signup' action="subscription.php" onsubmit="return validateForm();" method="post" >
<input type="text" id="signupUsername" name="signupusername" placeholder="Business Name" tabindex=1 required>
<input type="password" id="signupPassword" placeholder="Password" name="signuppassword" tabindex=2 required> <br>
<input type="text" id="ownerName" placeholder="Owner's Name" name="ownername" tabindex=3 required>
<input type="email" id="signupEmail" placeholder="Email" name="signupemail" tabindex=4 required>
<input type="tel" id="signupphoneNumber" placeholder="Phone Number" name="signupphonenumber" tabindex=5 required>
<input type="image" id="signupSubmit" src="images/signupBtn.jpg">
<input type="text" id="city" placeholder="City" name="city" tabindex=6>
<input type="text" id="state" placeholder="State" name="state" tabindex=7>
これは、ユーザー名が存在するかどうかを確認するためにクリックするボタンです
<input type="button" id='check' value="Check It">
///
</form>
<script type="text/javascript">
以下に、上のボタンをクリックすると関数usernamecheckをチェックする関数があります
$(function() {
$( "#check" ).click(function() {
return usernamecheck();
});
});
以下は validateForm 関数で、usernamecheck が true を返す場合は true を返し、フォームを送信します。
function validateForm()
{
if(usernamecheck() && $("#signupUsername").val().length < 4) {
return true;
}
}
function usernamecheck() {
$.post( "checkusername.php", { username: $("#signupUsername").val() })
.done(function( data ) {
result = JSON.parse(data);
if(result["status"]== "Username is taken")
{
alert("username is taken");
return false;
}
else if(result["status"]== "Username is Available") {
alert("username is Available");
return true;
}
else {
alert('You did not check the username');
}
});
}
</script>
<!-- Map Logo -->
<img src='images/map.jpg' id="map" class='menuitems'>
<!-- About Us Logo -->
<img src='images/aboutus.jpg' id="aboutus" class='menuitems'>
<!-- People Logo -->
<img src='images/people.jpg' id="people" class='menuitems'>
</div>
</div>
</div>
</body>
</html>