0

高さフィールドが入力されているかどうかを簡単にチェックする単純なフォーム検証に取り組んでいます。コード内のすべてを再確認しましたが、機能しない理由がわかりません。

私のHTML：

<form id="configuration" action="">

   <div class="con_near">
      <label for="height">height: (mm)</label>
      <input id="form_height" name="height" maxlength="4" type="text" />
   </div><!--End con_near-->

   <input name="calculated" type="submit" class="submit" value="Calculate" />

</form>

私のjQuery：

    <script>

    $(document).ready(function(){  

    // Form validation
    var configForm = $("#configuration");
    var height = $("#form_height");

    // On blur
    height.blur(validateHeight);

    // On keyup
    height.keyup(validateHeight);

    configForm.submit(function(){
        if(validateHeight())
            return true;

        else
            return false;

    });         

    function validateHeight() {
        if(height.val().length() < 4) {
            height.addClass("red_border");  
            return false;
        }
        else{
            height.removeClass("red_border");
            return true;    
        }
    }

    });

       </script>
4

5 に答える 5

2

長さは関数ではなく、プロパティです

試す

configForm.submit(function(){
    if(validateHeight(height))
        return true;

    else
        return false;

});     
function validateHeight(height) {
    if(height.val().length < 4) {
        height.addClass("red_border");  
        return false;
    }
    else{
        height.removeClass("red_border");
        return true;    
    }
}
于 2013-10-24T12:00:57.440 に答える
1

問題はここにあります.length()

使用する

if(height.val().length < 4) {

それ以外の

if(height.val().length() < 4) {
于 2013-10-24T12:02:43.993 に答える
0

イベントを送信すると、false を返しても停止しません。 preventDefault() を使用してイベントを停止する必要があります。このコードを試してください。

configForm.submit(function(e){
    if(!validateHeight())
        e.preventDefault();
});         

function validateHeight() {
    if(height.val().length < 4) { // <- here you also made a mistake in length its a property not a function
        height.addClass("red_border");  
        return false;
    }
    height.removeClass("red_border");
    return true;
}
于 2013-10-24T12:06:57.713 に答える
0

このようなことを試してください

$(document).ready(function(){

    // Form validation
    var configForm = $("#configuration");
    var height = $("#form_height");

    // On blur
    height.blur(validateHeight);

    // On keyup
    height.keyup(validateHeight);

    configForm.submit(function(){
        return validateHeight();
    });

    function validateHeight() {
        if(height.val().length < 4) {
            height.addClass("red_border");
            return false;
        }
        else{
            height.removeClass("red_border");
            return true;
        }
    }

});
于 2013-10-24T12:07:38.917 に答える
0

like のlength代わりに使用します。length()

if(height.val().length < 4) {

代わりに

if(height.val().length() < 4) {

function validateHeight(height) {
    if(height.val().length < 4) {
    .....

デモ

于 2013-10-24T12:04:17.503 に答える