Pomoc - Szukaj - Użytkownicy - Kalendarz
Pełna wersja: problem z obramowaniem
Forum PHP.pl > Forum > Po stronie przeglądarki
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:
  1. <form action="" method="post" onsubmit="if(!isFormValid()){ alert('Prosze poprawnie wpisac wszystkie dane');return false; }">
  2. // jakies inputy rozne
  3. </form>


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:

  1. input
  2. {
  3. background-color: #5B5D61;
  4. border: 0px solid #fff;
  5. color: #fff;
  6. font-size: 10px;
  7. }
  8.  
  9.  
  10. .invalidInput{
  11. border: 1px solid #f00;
  12. FONT-SIZE: 10px;
  13. }
  14.  
  15. .validInput{
  16. border: 1px solid #fff;
  17. FONT-SIZE: 10px;
  18. }


Będę bardzo wdzięczny za każdą pomoc !
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:

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


i checkbox:

  1. <input type="checkbox" name="dane_osobowe">


a oto skrypcik:

  1. <?php
  2. /********************************************************************************
    ****************************
  3. (C) www.dhtmlgoodies.com, February 2006
  4.  
  5. This is a script from www.dhtmlgoodies.com. You will find this and a lot of othe
    r scripts at our website.
  6.  
  7. Terms of use:
  8. You are free to use this script as long as the copyright message is kept intact.
     However, you may not
  9. redistribute, sell or repost it without our permission.
  10.  
  11. Thank you!
  12.  
  13. www.dhtmlgoodies.com
  14. Alf Magne Kalleland
  15.  
  16. ********************************************************************************
    ****************************/
  17.  
  18.  
  19. // Patterns
  20. var formValidationMasks = new Array();
  21. formValidationMasks['email'] = /b[A-Z0-9._%-]+@[A-Z0-9.-]+.[A-Z]{2,4}b/gi; // Email
  22. formValidationMasks['email_up'] = /(b[A-Z0-9._%-]+@[A-Z0-9.-]+.[A-Z]{2,4}b)|()/gi; // Email
  23. formValidationMasks['imie'] = /^b[A-Z&#261;śżźćęńłóĄŚŻŹĆŃŁÓ]{1,20}b$/gi;
  24. formValidationMasks['nazwisko'] = /^b[D]{1,40}b$/gi;
  25. formValidationMasks['login1'] = /b[A-Z0-9._-]{4,20}b/gi; // Login
  26. formValidationMasks['haslo'] = /[^"']{6,20}/gi; // Haslo
  27. formValidationMasks['numeric'] = /^[0-9]+$/gi; // Numeric
  28. formValidationMasks['zip'] = /^[0-9]{2}-[0-9]{3}$/gi; // Numeric
  29. // Numeric
  30.  
  31.  
  32. var formElementArray = new Array();
  33.  
  34. /* 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> */
  35.  
  36. function addEvent( obj, type, fn ) 
  37. { 
  38. if ( obj.attachEvent ) 
  39. { 
  40. obj['e'+type+fn] = fn; 
  41. obj[type+fn] = function(){obj['e'+type+fn]( window.event );
  42. } 
  43. obj.attachEvent( 'on'+type, obj[type+fn] ); 
  44. } 
  45. else 
  46. obj.addEventListener( type, fn, false ); 
  47. }
  48. function removeEvent( obj, type, fn ) 
  49. { 
  50. if ( obj.detachEvent ) 
  51. { 
  52. obj.detachEvent( 'on'+type, obj[type+fn] ); 
  53. obj[type+fn] = null; 
  54. } 
  55. else 
  56. obj.removeEventListener( type, fn, false ); 
  57. } 
  58.  
  59.  
  60. function validateInput(e,inputObj)
  61. {
  62. if(!inputObj)inputObj = this;
  63. var inputValidates = true;
  64.  
  65. if(formElementArray[inputObj.name]['required'] && inputObj.tagName=='INPUT' && inputObj.value.length==0)inputValidates = false;
  66. if(formElementArray[inputObj.name]['required'] && inputObj.tagName=='SELECT' && inputObj.selectedIndex==0)
  67. {
  68. inputValidates = false;
  69. }
  70. if(formElementArray[inputObj.name]['mask'] && !inputObj.value.match(formValidationMasks[formElementArray[inputObj.name]['mask']]))inputValidates = false;
  71.  
  72. if(formElementArray[inputObj.name]['freemask'])
  73. {
  74. var tmpMask = formElementArray[inputObj.name]['freemask'];
  75. tmpMask = tmpMask.replace(/-/g,'-');
  76. tmpMask = tmpMask.replace(/S/g,'[A-Z]');
  77. tmpMask = tmpMask.replace(/N/g,'[0-9]');
  78. tmpMask = eval("/^" + tmpMask + "$/gi");
  79. if(!inputObj.value.match(tmpMask))inputValidates = false
  80. }
  81.  
  82. if(formElementArray[inputObj.name]['regexpPattern']){
  83. var tmpMask = eval(formElementArray[inputObj.name]['regexpPattern']);
  84. if(!inputObj.value.match(tmpMask))inputValidates = false
  85. }
  86. if(!formElementArray[inputObj.name]['required'] && inputObj.value.length==0 && inputObj.tagName=='INPUT')inputValidates = true;
  87.  
  88.  
  89. if(inputValidates){
  90. inputObj.parentNode.className='validInput';
  91. }else{
  92. inputObj.parentNode.className='invalidInput'
  93. }
  94. }
  95.  
  96. function isFormValid()
  97. {
  98. var divs = document.getElementsByTagName('DIV');
  99. for(var no=0;no<divs.length;no++){
  100. if(divs[no].className=='invalidInput')return false;
  101. }
  102. return true;
  103. }
  104.  
  105.  
  106.  
  107.  
  108. function initFormValidation()
  109. {
  110. var inputFields = document.getElementsByTagName('INPUT');
  111. var selectBoxes = document.getElementsByTagName('SELECT');
  112.  
  113. var inputs = new Array();
  114.  
  115.  
  116. for(var no=0;no<inputFields.length;no++)
  117. {
  118. inputs[inputs.length] = inputFields[no];
  119. }
  120. for(var no=0;no<selectBoxes.length;no++)
  121. {
  122. inputs[inputs.length] = selectBoxes[no];
  123. }
  124.  
  125. for(var no=0;no<inputs.length;no++)
  126. {
  127. var required = inputs[no].getAttribute('required');
  128. if(!required)required = inputs[no].required;
  129.  
  130. var mask = inputs[no].getAttribute('mask');
  131. if(!mask)mask = inputs[no].mask;
  132.  
  133. var freemask = inputs[no].getAttribute('freemask');
  134. if(!freemask)freemask = inputs[no].freemask;
  135.  
  136. var regexpPattern = inputs[no].getAttribute('regexpPattern');
  137. if(!regexpPattern)regexpPattern = inputs[no].regexpPattern;
  138.  
  139. var div = document.createElement('DIV');
  140. div.className = 'invalidInput';
  141. inputs[no].parentNode.insertBefore(div,inputs[no]);
  142. div.appendChild(inputs[no]);
  143. div.style.width = inputs[no].offsetWidth + 'px';
  144.  
  145. addEvent(inputs[no],'blur',validateInput);
  146. addEvent(inputs[no],'change',validateInput);
  147. addEvent(inputs[no],'paste',validateInput);
  148. addEvent(inputs[no],'keyup',validateInput);
  149.  
  150.  
  151. formElementArray[inputs[no].name] = new Array();
  152. formElementArray[inputs[no].name]['mask'] = mask;
  153. formElementArray[inputs[no].name]['freemask'] = freemask;
  154. formElementArray[inputs[no].name]['required'] = required;
  155. formElementArray[inputs[no].name]['regexpPattern'] = regexpPattern;
  156.  
  157. validateInput(false,inputs[no]);
  158.  
  159. }
  160. }
  161.  
  162. window.onload = initFormValidation;
  163. ?>
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
To jest wersja lo-fi głównej zawartości. Aby zobaczyć pełną wersję z większą zawartością, obrazkami i formatowaniem proszę kliknij tutaj.
Invision Power Board © 2001-2025 Invision Power Services, Inc.