problem z obramowaniem Opcje

[Vasquez21]

Witam.

Niestety nie znam na tylko javascriptu by sie nim coś więcej bawić, ostatnio jednak znalazłem fajny algorytm, do walidacji formularzy, który jeżeli dana wartość jest poprawna (sprawdzane to jest poprzez wyrażenia regularne) to wprowadza obramowanie białe (standardowe) dla inputa, jeżeli jednak wartość ta jest nie poprawna powoduje że obramowanie staje się czerwone.

Wszystko niby działa, problem w tym, że kiedy dodałem checkboxa do formularza pojawił się problem gdyż on również został obramowany :/

czy można jakoś wyłączyć tą ramkę ? :/ Np. w kodzie w miejscu gdzie mam checkboxa dać, żeby wyłączył dany styl ?

sam skryp sprawdzający w kodzie umieszczony jest tak:

[HTML] pobierz, plaintext 
<form action="" method="post" onsubmit="if(!isFormValid()){ alert('Prosze poprawnie wpisac wszystkie dane');return false; }">
// jakies inputy rozne
 </form>
[HTML] pobierz, plaintext 

Myślałem, o tym żeby jakoś wyciągnąć checkboxy poza form, ale wtedy nie będę miał jak sprawdzić czy ktoś zaznaczył danego checkboxa. Podejrzewam, że najprościej zgodnie z tym skryptem zrobić to na css'ach.

Bardzo proszę o pomoc. Wkleję tutaj kodzik jaki mam w CSS'ie jeszcze:

[HTML] pobierz, plaintext 
input
{
   background-color: #5B5D61;
   border: 0px solid #fff;
   color: #fff;
   font-size: 10px;
}
 
 
.invalidInput{
 	border: 1px solid #f00;
	FONT-SIZE: 10px;
}
 
.validInput{
	border: 1px solid #fff;
	FONT-SIZE: 10px;
}
[HTML] pobierz, plaintext 

Będę bardzo wdzięczny za każdą pomoc !

Ten post edytował Vasquez21 27.01.2007, 14:37:38

[revyag]

Z kodu css, który podałeś nic nie wynika. Pokaż kawałek html z inputami i funkcję isFormValid()
Prawdopodobnie checkboxom ustawiłeś klasę która powoduje obramowanie,albo funkcja walidująca to robi.

[Vasquez21]

W htmlu nic nie ma specjalnego, zwykły input np:

[PHP] pobierz, plaintext 
<?php echo '<input name="email2" id="email2" type="text" mask="email" size="30" required="1" maxlength="100" value="'.$_POST['email2'].'">'; ?>
[PHP] pobierz, plaintext 

i checkbox:

[HTML] pobierz, plaintext 
<input type="checkbox" name="dane_osobowe">
[HTML] pobierz, plaintext 

a oto skrypcik:

[PHP] pobierz, plaintext 
<?php
/********************************************************************************
****************************
(C) www.dhtmlgoodies.com, February 2006
 
This is a script from www.dhtmlgoodies.com. You will find this and a lot of othe
r scripts at our website.	
 
Terms of use:
You are free to use this script as long as the copyright message is kept intact.
 However, you may not
redistribute, sell or repost it without our permission.
 
Thank you!
 
www.dhtmlgoodies.com
Alf Magne Kalleland
 
********************************************************************************
****************************/	
 
 
// Patterns
var formValidationMasks = new Array();
formValidationMasks['email'] = /b[A-Z0-9._%-]+@[A-Z0-9.-]+.[A-Z]{2,4}b/gi;	// Email
formValidationMasks['email_up'] = /(b[A-Z0-9._%-]+@[A-Z0-9.-]+.[A-Z]{2,4}b)|()/gi;	// Email
formValidationMasks['imie'] = /^b[A-Z&#261;śżźćęńłóĄŚŻŹĆŃŁÓ]{1,20}b$/gi;
formValidationMasks['nazwisko'] = /^b[D]{1,40}b$/gi;
formValidationMasks['login1'] = /b[A-Z0-9._-]{4,20}b/gi;	// Login
formValidationMasks['haslo'] = /[^"']{6,20}/gi;	// Haslo
formValidationMasks['numeric'] = /^[0-9]+$/gi;	// Numeric
formValidationMasks['zip'] = /^[0-9]{2}-[0-9]{3}$/gi;	// Numeric
// Numeric
 
 
var formElementArray = new Array();
 
/* These two event functions are from <a href="http://ejohn.org/apps/jselect/event.html" target="_blank">http://ejohn.org/apps/jselect/event.html</a> */
 
function addEvent( obj, type, fn ) 
{ 
  if ( obj.attachEvent ) 
  { 
	obj['e'+type+fn] = fn; 
	obj[type+fn] = function(){obj['e'+type+fn]( window.event );
  } 
	obj.attachEvent( 'on'+type, obj[type+fn] ); 
  } 
  else 
	obj.addEventListener( type, fn, false ); 
}
function removeEvent( obj, type, fn ) 
{ 
  if ( obj.detachEvent ) 
  { 
	obj.detachEvent( 'on'+type, obj[type+fn] ); 
	obj[type+fn] = null; 
  } 
  else 
	obj.removeEventListener( type, fn, false ); 
} 
 
 
function validateInput(e,inputObj)
{
	if(!inputObj)inputObj = this;		
	var inputValidates = true;
 
	if(formElementArray[inputObj.name]['required'] && inputObj.tagName=='INPUT' && inputObj.value.length==0)inputValidates = false;
	if(formElementArray[inputObj.name]['required'] && inputObj.tagName=='SELECT' && inputObj.selectedIndex==0)
	{
		inputValidates = false;
	}
	if(formElementArray[inputObj.name]['mask'] && !inputObj.value.match(formValidationMasks[formElementArray[inputObj.name]['mask']]))inputValidates = false;
 
	if(formElementArray[inputObj.name]['freemask'])
	{
		var tmpMask = formElementArray[inputObj.name]['freemask'];
		tmpMask = tmpMask.replace(/-/g,'-');
		tmpMask = tmpMask.replace(/S/g,'[A-Z]');
		tmpMask = tmpMask.replace(/N/g,'[0-9]');
		tmpMask = eval("/^" + tmpMask + "$/gi");
		if(!inputObj.value.match(tmpMask))inputValidates = false
	}	
 
	if(formElementArray[inputObj.name]['regexpPattern']){
		var tmpMask = eval(formElementArray[inputObj.name]['regexpPattern']);
		if(!inputObj.value.match(tmpMask))inputValidates = false
	}
	if(!formElementArray[inputObj.name]['required'] && inputObj.value.length==0 && inputObj.tagName=='INPUT')inputValidates = true;
 
 
	if(inputValidates){
		inputObj.parentNode.className='validInput';
	}else{
		inputObj.parentNode.className='invalidInput'
	}
}
 
function isFormValid()
{
	var divs = document.getElementsByTagName('DIV');
	for(var no=0;no<divs.length;no++){
		if(divs[no].className=='invalidInput')return false;
	}
	return true;	
}
 
 
 
 
function initFormValidation()
{
	var inputFields = document.getElementsByTagName('INPUT');
	var selectBoxes = document.getElementsByTagName('SELECT');
 
	var inputs = new Array();
 
 
	for(var no=0;no<inputFields.length;no++)
	{
		inputs[inputs.length] = inputFields[no];	
	}	
	for(var no=0;no<selectBoxes.length;no++)
	{
		inputs[inputs.length] = selectBoxes[no];	
	}
 
	for(var no=0;no<inputs.length;no++)
	{
		var required = inputs[no].getAttribute('required');
		if(!required)required = inputs[no].required;		
 
		var mask = inputs[no].getAttribute('mask');
		if(!mask)mask = inputs[no].mask;
 
		var freemask = inputs[no].getAttribute('freemask');
		if(!freemask)freemask = inputs[no].freemask;
 
		var regexpPattern = inputs[no].getAttribute('regexpPattern');
		if(!regexpPattern)regexpPattern = inputs[no].regexpPattern;
 
		var div = document.createElement('DIV');
		div.className = 'invalidInput';
		inputs[no].parentNode.insertBefore(div,inputs[no]);
		div.appendChild(inputs[no]);
		div.style.width = inputs[no].offsetWidth + 'px';
 
		addEvent(inputs[no],'blur',validateInput);
		addEvent(inputs[no],'change',validateInput);
		addEvent(inputs[no],'paste',validateInput);
		addEvent(inputs[no],'keyup',validateInput);
 
 
		formElementArray[inputs[no].name] = new Array();
		formElementArray[inputs[no].name]['mask'] = mask;
		formElementArray[inputs[no].name]['freemask'] = freemask;
		formElementArray[inputs[no].name]['required'] = required;
		formElementArray[inputs[no].name]['regexpPattern'] = regexpPattern;
 
		validateInput(false,inputs[no]);
 
	}	
}
 
window.onload = initFormValidation;
?>
[PHP] pobierz, plaintext 

Ten post edytował Vasquez21 27.01.2007, 15:52:44

[revyag]

Dodaj w tej pętli warunek sprawdzający czy input jest checkboxem.

Kod

for(var no=0;no<inputs.length;no++)
    {
      if(inputs[no].type!="checkbox") {

[Vasquez21]

dzięki wielkie... takie proste a ja nad tym tyle siedziałem :|

Jeszcze raz dzięki