2016-12-05 4 views
0

私はこのjavascriptコードでいくつかの助けが必要です。私は夜の税のボックスと名前のテキストボックスを検証したいので、それらの値があります。 [夜間]テキストボックスでは、数値のみを入力する必要があります。ここでjavascript数値と文字列のテキストボックスを検証する

は私のコードコードUPDATED

$(document).ready(function() { 
 
    
 
    var emailPattern = /\b[A-Za-z0-9._%+-][email protected][A-Za-z0-9.-]+\.[A-Za-z]{2,4}\b/; 
 
    //var numeric = /^[0-9]+$/; 
 
    var regex = /[0-9]|\./; 
 
     
 
     $(":text, #error").after("<span>*</span>"); 
 
     $("arrival_date").focus(); 
 
     
 
    $(document).on("click", "#submit", function (e) { 
 
     
 
     var valid = true; 
 
     
 
     if ($("#name").val() === "") { 
 
      $("#name").next().text("This field is required.").css({ 
 
       "color": "#FF0000", 
 
       "font-size": "13px" 
 
      }); 
 
      valid = false; 
 
     } 
 
     else { 
 
      
 
      valid = true; 
 
     } 
 
     
 
     if ($("#nights").val() === "") { 
 
      valid = false; 
 
      $("#nights").next().text("This field is required.").css({ 
 
       "color": "#FF0000", 
 
       "font-size": "13px" 
 
      }); 
 
     } else if (!regex.test("nights")) { 
 
      $("#nights").next().text("This field is required.").css({ 
 
       "color": "#FF0000", 
 
       "font-size": "13px" 
 
      }); 
 
      valid = false; 
 
     } 
 
     else { 
 
      valid = true; 
 
     } 
 
ad
<!DOCTYPE html> 
 
<html lang="en"> 
 
<head> 
 
\t <meta charset="UTF-8"> 
 
\t <title>Reservation request</title> 
 
\t <link rel="stylesheet" href="main.css"> 
 
\t <script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script> 
 
\t <script src="http://code.jquery.com/jquery-latest.min.js"></script> 
 
\t <script src="reservation.js"></script> 
 
</head> 
 
\t 
 
<body> 
 
\t <h1>Reservation Request</h1> 
 
\t <form action="response.html" method="get" 
 
    \t name="reservation_form" id="reservation_form"> 
 
\t \t <fieldset> 
 
     \t <legend>General Information</legend> 
 
     \t <label for="arrival_date">Arrival date:</label> 
 
     \t <input type="text" name="arrival_date" id="arrival_date" autofocus><br> 
 
     \t <label for="nights">Nights:</label> 
 
     \t <input type="text" name="nights" id="nights"><br> 
 
     \t <label>Adults:</label> 
 
     \t <select name="adults" id="adults"> 
 
     \t \t <option value="1">1</option> 
 
     \t \t <option value="2">2</option> 
 
     \t \t <option value="3">3</option> 
 
     \t \t <option value="4">4</option>   \t \t   \t \t   \t \t 
 
     \t </select><br> 
 
     \t <label>Children:</label> 
 
     \t <select name="children" id="children"> 
 
     \t \t <option value="0">0</option> 
 
     \t \t <option value="1">1</option> 
 
     \t \t <option value="2">2</option> 
 
     \t \t <option value="3">3</option> 
 
     \t \t <option value="4">4</option>   \t \t   \t \t   \t \t 
 
     \t </select><br>   \t 
 
\t \t </fieldset> 
 
\t \t <fieldset> 
 
     \t <legend>Preferences</legend> 
 
     \t <label>Room type:</label> 
 
\t \t \t <input type="radio" name="room" id="standard" class="left" checked>Standard&nbsp;&nbsp;&nbsp; \t   \t 
 
\t \t \t <input type="radio" name="room" id="business" class="left">Business&nbsp;&nbsp;&nbsp; 
 
\t \t \t <input type="radio" name="room" id="suite" class="left last">Suite<br> 
 
     \t <label>Bed type:</label> 
 
\t \t \t <input type="radio" name="bed" id="king" class="left" checked>King&nbsp;&nbsp;&nbsp; 
 
\t \t \t <input type="radio" name="bed" id="double" class="left last">Double Double<br> 
 
\t \t \t <input type="checkbox" name="smoking" id="smoking">Smoking<br> 
 
\t \t </fieldset> \t \t 
 
\t \t <fieldset> 
 
    \t \t <legend>Contact Information</legend> 
 
    \t \t <label for="name">Name:</label> 
 
\t \t \t <input type="text" name="name" id="name"><br> 
 
     \t <label for="email">Email:</label> 
 
     \t <input type="text" name="email" id="email"><br> 
 
\t \t \t <label for="phone">Phone:</label> 
 
\t \t \t <input type="text" name="phone" id="phone" placeholder="999-999-9999"><br> 
 
\t \t </fieldset> 
 

 
\t \t <input type="submit" id="submit" value="Submit Request"><br> 
 

 
\t </form> 
 
</body> 
 
</html>

です。

function isNumeric(n) { 
    return !isNaN(parseFloat(n)) && isFinite(n); 
} 

、あなたが使用することができます。

$(document).ready(function() { 

var emailPattern = /\b[A-Za-z0-9._%+-][email protected][A-Za-z0-9.-]+\.[A-Za-z]{2,4}\b/; 
//var numeric = /^[0-9]+$/; 
var regex = /[0-9]|\./; 

    $(":text, #error").after("<span>*</span>"); 
    $("arrival_date").focus(); 


function isNumeric(n) { 
    return !isNaN(parseFloat(n)) && isFinite(n); 
} 
$(document).on("click", "#submit", function (e) { 

    var valid = true; 

    if ($("#name").val() === "") { 
     $("#name").next().text("This field is required.").css({ 
      "color": "#FF0000", 
      "font-size": "13px" 
     }); 
     valid = false; 
    } 

    if ($("#nights").val() === "") { 
     valid = false; 
     $("#nights").next().text("This field is required.").css({ 
      "color": "#FF0000", 
      "font-size": "13px" 
     }); 
    } else if (isNumeric("#nights")) { 
     $("#nights").next().text("This field is required.").css({ 
      "color": "#FF0000", 
      "font-size": "13px" 
     }); 
     valid = false; 
    } 

    if (valid === false) 
     e.preventDefault(); 

});  }); 

私がホッピングされた誰かが私にあなたが入力が数値であるかどうかを確認するための機能を既存の使用することができます

+0

あなたの質問がすべてjsに関するものであれば、cssのような不要なコードをすべて削除してください。質問が難しくなります –

+0

私はただCSSを削除します。 – Jabateh

答えて

1

を助けることができること(hereから撮影) HTML5's input type number

<input type="number" min="1" max="5"> 

あなたの現在の正規表現は、意図した動作ではない、あらゆる種類の数字を含む文字列に対してtrueを返すので、動作しません。

変数validの使用方法も間違っています:#nightsが正しく検証された場合、フォーム入力は有効になります。名前入力の結果は無視されます。

+0

どうすれば名前の入力を無視しないように修正できますか – Jabateh

+0

@Jabateh 'else ='行を削除して 'valid = true;'を設定します。 'valid'は開始時に真であるので、他のブランチがなければ、いずれかの検証が失敗した場合はfalseになります(' true'に上書きされません)。 –

+0

申し訳ありません、私はjavascriptを初めて使っています。私はあなたが私に言ったことをしましたが、夜間テキストボックスに文字列値(例:aまたはbまたはth)以外の値を入力し、名前テキストボックスに値を入力して「submit」をクリックします。それはそれを受け入れる。しかし、私が本当に欲しいのは、数値の単語を受け入れることです。私はちょうど、コードを更新しました。私に間違っていることを教えてください。 – Jabateh

関連する問題