Javascript / html / css kullanarak dikmeler doğrulama taklit nasıl

6 Cevap php

For the past few years I've focused on back-end development so my javascript & css skills are lacking. I'm volunteering as a webmaster for a site and would like to spruce up the form validation (currently there is none).
My problem: Basically I have one form with a few name fields, an email address and a phone number. When the form is submitted I validate all fields. If data is invalid I would like to change that field's label color to red (similar to struts validation). What's the easiest way to do this?

Düzenleme: Ben arka uç PHP doğrulama da var. Ben ön uç daha güzel ve kullanıcı dostu daha yapmak için arıyorum. PHP doğrulama farklı bir sunucu üzerinde yer almaktadır. Doğrulama arka-uç başarısız olursa, bir ileti görüntüler ve kullanıcı geri düğmesini kullanmak zorunda kalır. Ben geri orijinal sayfaya yeniden yönlendirmek ve geçersiz alanlarını görüntülemek için umuyorum.

6 Cevap

Eğer sayfa sunucu tarafı inşa ederken, onları hataları ile tüm alanları işaretlemek:

<input type="text" name="phone_number" class="error_field">
   555-121
</input>

Sonra sayfanın CSS gibi bir girdi içerir:

input.error_field { color: #FFF; bgcolor: #C00; }

(Dönemin bir "sınıf seçici", bu zaten girdi etiketleri için sınıfları kullanıyorsanız sadece ayırmak için boşluk kullanın, elemanları birden fazla sınıflar verebilir. Class özniteliği "error_field" ile tüm girişler için geçerlidir anlamına gelir.)

Eğer sayfasını renklendirmek üreten kod Struts ne tür bilmek istiyorsanız, tek kolay yolu Firefox için Firebug uzantısı kullanmaktır.

Etiket giriş olarak DOM hiyerarşi aynı seviyede ve hemen yanındaki biçimlendirme girişine olduğunu varsayarsak, böyle bir şey yapabilirsiniz.

Her şeyden önce, bir örneğin HTML:

<html>
    <body>
    	<form onsubmit="return validation()" action="submit.php" method="post">
    		<label for="name">Name:</label>
    		<input type="text" value="" id="name" />
    		<label for="email">Email:</label>
    		<input type="text" value="" id="email" />

    		<input type="submit" value="Submit" />
    	</form>
    </body>
</html>

Gördüğünüz gibi, tüm girdilerinin niteliği için doğru bir etiket öncesinde.

Şimdi kafa gitmek istiyorum Javascript için:

<script type="text/javascript">
    function validation() {
    	//So we have a validation function.
    	//Let's first fetch the inputs.
    	name = document.getElementById("name");
    	email = document.getElementById("email");

    	//The variable error will increment if there is a validation error.
    	//This way, the form will not submit if an error is found.
    	error = 0; 

    	//Now for validation.
    	if(name.value.length < 6) {
    		//We've found an error, so increment the variable
    		error++;

    		//Now find the corresponding label.
    		nameLabel = name.previousSibling;

    		//If we found the label, add an error class to it.
    		if(nameLabel && nameLabel.for = name.id) {
    			nameLabel.className = "error";
    		}
    	}

    	///////////////////
    	//Do the same with the email...
    	///////////////////

    	//Now, if there are no errors, let the form submit.
    	//If there are errors, prevent it from doing so.
    	return (error == 0) ? true : false;
    }
</script>

Şimdi sadece bazı CSS ekleyin:

<style type="text/css">
.error {
  background-color: red;
}
</style>

Düzen - Ben çözümü bu tür istemedi sanırım, ama bunu sunucuya gitmeden önce doğrulamak istiyorum durumda, burada gitmek. :)

Struts doğrulama sunucu tarafında oluyor; JavaScript doğrulama istemci üzerinde çalışır. Sunucu tarafı doğrulama hala istemci tarayıcınızda JavaScript kapanır bile çalışır (ve ~ insanların 10% bildirildi yapmak) çünkü ayrım önemlidir.

İyi eğer hem sahip.

Başkalarına tavsiye ettiler gibi, kendinizi birlikte bu koyabilirsiniz. Ama Struts kendi JavaScript doğrulama olduğunu hatırlamak gibi görünüyor. Bu sunucu tarafında yapılır aynı denetimleri gerçekleştirmek JavaScript fonksiyonlarını oluşturmak için yapılandırılabilir. Giriş documentation - İstediğiniz gibi özelleştirilebilir olmayabilir ancak bu, başlamak için hızlı bir yol olabilir.

Kesinlikle daha önce dikmeler kullanılmış değil, ama ben javascript ile ve olmadan form doğrulama bir sürü yapmak.

Benim düşünceme göre, her zaman javascript ve sunucu tarafı doğrulama hem de olmalıdır, bu yüzden herkes için çalışması gerekir.

Sunucu tarafı, sen, glaziusf.myopenid.com bahsettiğim gibi bir şey yapmak sadece kırmızı bunu gösteriyor öğe için bir sınıf eklemek gerekir.

Javascript (ve ajax) olarak, sadece sunucu tarafı kullanmak istediğiniz öğeye aynı sınıf eklemek, ama dinamik.

Ben JQuery veya Prototype gibi JavaScript çerçeve öğrenmek tavsiye ederim. JQuery gerçekten kolay, vb süzülmüş elemanları üzerinden değerlerini elde onların CSS değiştirmek, görsel efektler eklemek için yardımcı olur.

I don't really understand the PHP logic of your site, but you can put a validation in the same page if the action submits to itself, although I don't know if it's a good practice. For example, you put the following at the top:

if( $_SERVER['REQUEST_METHOD'] == 'POST' ){
//field validation code...

PHP ile yönlendirmek için size diyorum ki:

header("Location: THE_PAGE.php");

Bunu önce bir şey outputed olmamalıdır da. Muhtemelen geri sayfaya bir parametre geçebileceği (örn: THE_PAGE.php valMsg = 1?) Doğrulama iletileri, ya da tür bir şey göstermek için bunu söylemek için.

etiketler