JavaScript'ten geçersiz bir alanı işaretleyebilir miyim?

Okuyunca bu yazıyı ben HTML5'e tanıtıldı 'geçerli' ve 'geçersiz' giriş değerleri için bazı sözde sınıfları olduğunu bulduk.

Bir giriş alanını javascript'ten geçersiz / geçerli olarak işaretlememin bir yolu var mı? Veya alternatif olarak, kullanılan doğrulama yöntemini geçersiz kılabilir miyim?

Bu amaçla customValidity işlevini kullanabilirsiniz.

Alana bir customValidity mesajı eklerseniz, geçersiz hale gelir. Mesajı boş bir dize olarak ayarladığınızda, tekrar geçerli hale gelir (başka nedenlerden dolayı geçersiz olmadığı sürece).

field.setCustomValidity("Invalid field."); alanı geçersiz kılar.

field.setCustomValidity(""); HTML5 kısıtlamasında başarısız olmadığı sürece alanı geçerli kılar.

Düzenleme : Birisi, DOM için "geçerli" "geçersiz" öznitelikler aradığınızı açıkladı.

Kullanarak her bir etikete öznitelik eklerdim dom_object.setAttribute("isvalid", "true"). Ayrıca, bu öznitelikleri her seferinde güncelleyen (ve dom_object.getAttribute("isvalid")her seferinde kullanan ) merkezi bir doğrulama işlevine de sahip olabilirsiniz .

Bu işlevi, bir öğenin odağını her kaybettiğinde veya istediğiniz zaman çalıştırabilirsiniz.

Tam olarak zarif sayılmaz, ancak ne yazık ki artık javascript ve HTML5 için "sözde" destek yok.

Sorunuzu anlarsam, Javascript ile doğrulama yapabilirsiniz. Ancak, istemci tarafı doğrulamasını, özellikle javascript doğrulamasını atlatmanın çok kolay olduğu konusunda uyarılmalıdır . İstemci verilerine asla güvenmemeli ve daima sunucu tarafında kontrol yapmamalısınız.

Örneğin, kaynak kodunu inceleyerek öğe kimliklerini kolayca bulabilirim, ardından document.getElementById('some_id').setAttribute('max', new_number)maksimum değeri değiştirebilirim (bu, bağlantınızdaki girişlerden biriydi).

Bunu yapmanın çeşitli yolları var, bu yüzden size genel deyimi vermeye çalışacağım.

Yaparak değeri yakalayabilirsiniz document.getElementById('form_element_id').value( namesunucuya gönderilen a ve idjavascript tarafından kullanılan bir formu verdiğinizden emin olun ). Metin alanları için kullanabilirsiniz .innerHTML.

O zaman bir değişkendeki değer var, onu kontrol etmenin çeşitli yolları var.

Örneğin yapabilirsin if (parseInt(my_value) < 0) //error. Normal ifadeler de kullanabilirsiniz, hepsini açıklamayacağım ama buradan başlayabilirsiniz http://www.w3schools.com/jsref/jsref_obj_regexp.asp . W3schools'un en iyi kaynak olmadığını biliyorum ama başlamak için uygun bir yer buluyorum.

Şimdi doğrulama bölümü için: onsubmit="return validateForm()form etiketinize ekleyin ; burada validateForm (), tüm denetimi yapan işlevdir. Ve işlev true, geçerliyse veya falsedeğilse geri döner . Bu , varsayılan doğrulama işlevini geçersiz kılar (varsayılan olarak hiçbir şey yapmaz).

Yani yukarıdaki örnekte, //errorile değiştirilecektir return false. Başka şeyler de yapabilirsiniz; örneğin hatayı uyarır ve ardından yanlış döndürür. Geçersiz alanları vurgulamak için javascript de kullanabilirsiniz (" bir giriş alanını javascript'ten geçersiz / geçerli olarak işaretle " ile kastettiğinizden emin değilsiniz )

Elbette, tüm alanları kontrol etmek istemiyorsanız, yalnızca belirli alanlar geçerse doğru döndürmeniz gerekir. Yine, buna güvenmemelisiniz, ancak sadece ortalama insanları caydırmak istiyorsanız, o zaman bu kolay bir çözümdür.

Bir giriş alanını javascript'ten geçersiz / geçerli olarak işaretlememin bir yolu var mı?

Ne yazık ki, JavaScript'te sözde sınıfların stilini belirleyemezsiniz, çünkü bunlar gerçek öğeler değildir, gerçek DOM'da mevcut değildirler.

Vanilya JavaScript ile doğrulama API'sini kullanırsınız .

JQuery'de bunu kolayca yapabilirsiniz, http://jsfiddle.net/elclanrs/Kak6S/

if ( $input.is(':invalid') ) { ... }

Veya alternatif olarak, kullanılan doğrulama yöntemini geçersiz kılabilir miyim?

HTML5 doğrulaması kullanıyorsanız, işaretlemeye bağlı kalın. Aksi takdirde, HTML5 doğrulamasını ile devre dışı bırakabilir $form.attr('novalidate', 'novalidate')ve alanlarınızı doğrulamak için JS'yi kullanabilir ve ardından gerektiğinde validveya invalidsınıfları ekleyebilirsiniz . HTML5 olmayan tarayıcıları desteklemek için böyle çalışan bir eklenti yaptım .