空白のHTMLフォームの送信を回避するにはどうすればよいですか？

Question

Formspree（これはすごいです）：私はすべてのフィールドを必須に設定しています。手作業で試してみると、すべてを正しく入力せずにフォームを送信することはできませんが、来る。誰もこれを経験したことがありますか？

ありがとうございます！

<form action="https://formspree.io/XXXXXXXX" method="post"> 
<input name="_gotcha" style="display: none" type="text"> 

<input class="form-control input-lg" name="firstname" placeholder="First Name" required type="text"> 

<input class="form-control input-lg" name="lastname" placeholder="Last name" required type="text"> 

<input class="form-control input-lg" name="phone" placeholder="Phone number" required type="text"> 

<select required name="country" class="form-control input-lg" style="border-radius:none; -webkit-appearance: none; padding-top:0px;"> 
    <option value="" disabled selected>Please select your country </option> 
    <option value="Afganistan">Afghanistan</option> 
    <option value="Albania">Albania</option> 
    <option value="other">Not in the List</option> 
    <!-- etc --> 
</select> 

<input type="hidden" name="referrer" id="referrer_field" /> 
<input type="hidden" name="url" id="url_field" /> 

<button id="demo" type="submit">GO</button> 

Answer 1

そして、これは誰かがのフィールドに「spacesまたは空白でそれを残す」を入れても動作します、これは、あなたのコードのための別のソリューションであるを使用してこれを行うことができます 名前または電話番号。

は、誰かが入力ボックスにスペースを入力した場合、このjQueryのコードは動作やフィールドで適切なテキストを埋めるために彼を尋ねてきます。..

// Bind the event handler to the "submit" JavaScript event 
 
$('form').submit(function() { 
 

 
    // Get the Login Name value and trim it 
 
    var fname = $.trim($('#fname').val()); 
 
    var lname = $.trim($('#lname').val()); 
 
    var phon =$.trim($('#phon').val()); 
 

 
    // Check if empty of not 
 
    if (fname === '') { 
 
     alert('First name is empty.'); 
 
     return false; 
 
    } 
 
    else if (lname === '') { 
 
     alert('Last Name is empty.'); 
 
     return false; 
 
    } 
 
    else if (phon === '') { 
 
     alert('Phone is empty.'); 
 
     return false; 
 
    } 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.0/jquery.min.js"></script> 
 
<form action="https://formspree.io/XXXXXXXX" method="post"> 
 
<input name="_gotcha" style="display: none" type="text"> 
 

 
<input class="form-control input-lg" name="firstname" placeholder="First Name" id="fname" required type="text"> 
 

 
<input class="form-control input-lg" name="lastname" placeholder="Last name" id="lname" required type="text"> 
 

 
<input class="form-control input-lg" name="phone" placeholder="Phone number" id="phon" required type="text"> 
 

 
<select name="country" class="form-control input-lg" style="border-radius:none; -webkit-appearance: none; padding-top:0px;"> 
 
    <option value="" disabled selected>Please select your country </option> 
 
    <option value="Afganistan">Afghanistan</option> 
 
    <option value="Albania">Albania</option> 
 
    <option value="other">Not in the List</option> 
 
    <!-- etc --> 
 
</select> 
 

 
<input type="hidden" name="referrer" id="referrer_field" /> 
 
<input type="hidden" name="url" id="url_field" /> 
 

 
<button id="demo" type="submit">GO</button>

をフィドルを確認してください。

Answer 2

単純な解決策は、このようなものになります。あなたはjQueryの

// Bind the event handler to the "submit" JavaScript event 
 
$('form').submit(function() { 
 

 
    // Get the Login Name value and trim it 
 
    var name = $.trim($('#log').val()); 
 

 
    // Check if empty of not 
 
    if (name === '') { 
 
     alert('Text-field is empty. You cannot leave is blank!'); 
 
     return false; 
 
    } 
 
});

.text-label { 
 
    color: #cdcdcd; 
 
    font-weight: bold; 
 
} 
 
#pwd{ 
 
    margin:10px 18px; 
 
    } 
 

 
#logBtn{ 
 
    margin:10px 90px; 
 
    }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.0/jquery.min.js"></script> 
 
<form action="login.php" method="post"> 
 
    <label>Login Name:</label> 
 
    <input type="text" name="email" id="log" /> 
 
    <br/> 
 
    <label>Password:</label> 
 
    <input type="password" name="password" id="pwd" /> 
 
    <br/> 
 
    <input type="submit" id="logBtn" name="submit" value="Login" /> 
 
</form>

Answer 3

私は必要なタグが

が必要だと思った http://www.w3schools.com/tags/att_input_required.asp

<input class="form-control input-lg" name="firstname" placeholder="First Name" required > 

なしequalsと

か何か

= "真/偽"