alınıyor bir hata

Question

benim yeni web sitesi için bir "Sign Up" form oluşturarak, ancak bazı koşullar olmak için kontrol gerekiyordu bir jQuery/JS işlevi ile ilgili bir sorun var değilim "this.is bir işlev değil" ulaştı. İşte

$(function checkform() { 
if (this.is("#username")) { 
var validchars = /^[a-zA-Z0-9\s]+$/; 
var nameHasError; 
if (this.val().length < 6 && this.val().length > 26) { 
    nameHasError = true; 
    this.parent("div").addClass("has-error"); 
} else if (!(validchars.test(this).val())) { 
    nameHasError = true; 
    this.parent("div").addClass("has-error"); 
} else { 
    nameHasError = false; 
    this.parent("div").removeClass("has-error"); 
}; 
} else if (this.is("#password")) { 
var passHasError; 
if (this.val().length < 5 && this.val().length > 45) { 
    passHasError = true; 
    this.parent("div").addClass("has-error"); 
} else { 
    passHasError = false; 
    this.parent("div").removeClass("has-error"); 
}; 
}; 
}); 

HTML bölümü ile JSFiddle (web siteme önyükleme kullanılarak fakat keman üzerinde belirli bir sınıfı ayarlamak için tercih ediyorum)

Saygılarımızla Sen vanilya karıştırma

Answer 1

Sen $() içinde checkForm tanımlanmış, bu yüzden işlevi böylece senin onkeypress bir hata

hazır dom fırlatır, sadece dom hazır işleyicisi içinde kullanılamayacaktır

• kodunda birden sorun bulunmamaktadır
• karakter boyutu doğrulama || olup &&
kullanmalıdır işleyici is işlevi yoktur belge nesnesi olacak fonksiyonu this çağırır

Yani, ti alanlarının ikisi Kodunuzda

jQuery(function($) { 
 
    $('#username').on('keypress', function() { 
 
    var validchars = /^[a-zA-Z0-9\s]+$/; 
 
    var nameHasError = false; 
 
    var $this = $(this), 
 
     value = this.value; 
 
    if (value.length < 6 || value.length > 26) { 
 
     nameHasError = true; 
 
    } else if (!validchars.test(value)) { 
 
     nameHasError = true; 
 
    }; 
 
    $this.parent("div").toggleClass("has-error", nameHasError); 
 
    }); 
 
    $('#password').on('keypress', function() { 
 
    var passHasError = false; 
 
    var $this = $(this), 
 
     value = this.value; 
 
    if (value.length < 5 || value.length > 45) { 
 
     passHasError = true; 
 
    }; 
 
    $this.parent("div").toggleClass("has-error", passHasError); 
 
    }); 
 
});

.has-error { 
 
    background-color: red; 
 
} 
 
.has-success { 
 
    background-color: green; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div class="form-group"> 
 
    <div class=""> 
 
    <label for="username">Username</label> 
 
    <input type="text" class="form-control" id="username" placeholder="Between 6 and 26 characters"> 
 
    <span id="unameError"></span> 
 
    </div> 
 
    <br/> 
 
    <div class=""> 
 
    <label for="password">Password</label> 
 
    <input type="password" class="form-control" id="password" placeholder="Password"> 
 
    <span id="passError"></span> 
 
    </div> 
 
</div>

Answer 2

javascript jquery ile var sözdizimi. this.is('#username') javascript değildir.

Kullanım this.id == "username" (vanilya js) yerine

VEYA

$(this).is('#username') (jquery)

sizin fonksiyonlarda kapsamı ile dikkat

Answer 3

function checkform() { 
 
    if ($(this).is("#username")) { 
 
    var validchars = /^[a-zA-Z0-9\s]+$/; 
 
    var nameHasError; 
 
    if ($(this).val().length < 6 || $(this).val().length > 26) { 
 
     nameHasError = true; 
 
     $(this).parent("div").addClass("has-error"); 
 
    } else if (!(validchars.test($(this).val()))) { 
 
     nameHasError = true; 
 
     $(this).parent("div").addClass("has-error"); 
 
    } else { 
 
     nameHasError = false; 
 
     $(this).parent("div").removeClass("has-error"); 
 
    }; 
 
    } else if ($(this).is("#password")) { 
 
    var passHasError; 
 
    if ($(this).val().length < 5 || $(this).val().length > 45) { 
 
     passHasError = true; 
 
     $(this).parent("div").addClass("has-error"); 
 
    } else { 
 
     passHasError = false; 
 
     $(this).parent("div").removeClass("has-error"); 
 
    }; 
 
    }; 
 
} 
 

 
$(function() { 
 
\t $('input').on('keyup', checkform); 
 
})

.has-error { 
 
    background-color: red; 
 
} 
 

 
.has-success { 
 
    background-color: green; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div class="form-group"> 
 
    <div class=""> 
 
    <label for="username">Username</label> 
 
    <input type="text" class="form-control" id="username" placeholder="Between 6 and 26 characters"> 
 
    <span id="unameError"></span> 
 
    </div> 
 
    <br/> 
 
    <div class=""> 
 
    <label for="password">Password</label> 
 
    <input type="password" class="form-control" id="password" placeholder="Password"> 
 
    <span id="passError"></span> 
 
    </div> 
 
</div>