Javascript- kontaktní formulář

Fórum › JavaScript, AJAX, jQuery

pepagrafik 0

Duch

8. 6. 2011 #1

mam takovej malej problem, potřebuju poradit s kontaktnim formulařem. potřebuju tam nějakou informaci kam se to ma posilat, a plus u mailu kdyby mi tam chyběl třeba zevinač tak aby me to upozornilo že chíbí @
zatím mam tohle jen

<script type="text/javascript">
function kontaktni_formular()
{
if(document.getElementById("email").value.length==0){
alert("Chbí něco");
document.getElementById("email").focus();
return false;
}
if(document.getElementById("zprava").value.length==0) {
alert("chybí něco.");
document.getElementById("zprava").focus();
return false;
}
return true;
}</script>
<form onsubmit="return kontaktni_formular()" action="hhh">
<p>

Jméno: <input type="text" name="01Jméno" value="" />
Email: <input type="text" id="email" name="02Email" value="" />
Zpráva:<textarea id="zprava" name="03Zpráva" rows="6" cols="50"></textarea>
<input type="submit" value="Odeslat" />

předem díky za radu

Nahlásit jako SPAM

IP: 90.183.11.–

KIIV

~ Moderátor

+43

God of flame

8. 6. 2011 #2

co ti brani? <form> ma par uzitecnych parametru... action uz znas - to je to "kam se ma posilat"... validni email se da otestovat pres regularni vyrazy ( a to nejen chybejici @ - staci hledat na google ) a za polozkou muzes mit dalsi element, do ktereho javascriptem proste neco vypises

Nahlásit jako SPAM

IP: 212.136.56.–

_{Program vždy dělá to co naprogramujete, ne to co chcete...}

pepagrafik 0

Duch

8. 6. 2011 #3

To KIIV :
netuším, potřubuje pořadně kopnout, kod

Nahlásit jako SPAM

IP: 90.183.11.–

KIIV

~ Moderátor

+43

God of flame

8. 6. 2011 #4

To pepagrafik : ja mam ale pro jQuery...



--- html: ---

					<h3>Nezáväzná objednávka: </h3>

					<div class="bg">

						<table>

							<tr>

								<th><label>Meno*:</label></td>

								<td><input type="text" value="" name="jmeno" /></td>

								<td><em id="jmeno" class="required" style="display:none">Hodnota musí byť vyplnená.</em></td>

							</tr>

							<tr>

								<th><label>Priezvisko*:</label></td>

								<td><input type="text" value="" name="prijmeni" /></td>

								<td><em id="prijmeni" class="required">Hodnota musí byť vyplnená.</em></td>

							</tr>

							<tr>

								<th><label>E-mail*:</label></td>

								<td><input type="text" value="" name="email" /></td>

								<td><em id="email" class="required_email" style="display:none">Neplatný tvar emailu.</em></td>

							</tr>



							<tr>

								<th><label>Telefón*:</label></td>

								<td><input type="text" value="+421" name="telefon" /></td>

								<td><em id="telefon" class="required_tel" style="display:none">Hodnota musí byť vyplnená ve formátu +421xxxyyyzzz bez mezer.</em></td>

							</tr>

							<tr>

								<td></td>

								<td colspan="2"><input type="submit" class="submit" value="Odoslať objednávku" /></td>

							</tr>

						</table>

					<hr />

					</div>



--- javascript: ----

    $(".submit").click(function () {

      var test = true;

      $(".required").each(function () {

        var id = $(this).attr('id');

        if ( $("input[name="+id+"]").val() == '' ) {

          $(this).show();

          test = test && false;

        } else {

          $(this).hide();

        }

      });



      $(".required_tel").each(function () {

        var id = $(this).attr('id');

        if ( !( $("input[name="+id+"]").val().match(/^\+42[01][0-9]{9}$/)) ) {

          $(this).show();

          //$(this).html("|"+$("input[name="+id+"]").val()+"|");

          test = test && false;

        } else {

          $(this).hide();

        }

      });



      $(".required_email").each(function () {

        var id = $(this).attr('id');

        if ( !( $("input[name="+id+"]").val().match(/^(("[\w-\s]+")|([\w-]+(?:\.[\w-]+)*)|("[\w-\s]+")([\w-]+(?:\.[\w-]+)*))(@((?:[\w-]+\.)*\w[\w-]{0,66})\.([a-z]{2,6}(?:\.[a-z]{2})?)$)|(@\[?((25[0-5]\.|2[0-4][0-9]\.|1[0-9]{2}\.|[0-9]{1,2}\.))((25[0-5]|2[0-4][0-9]|1[0-9]{2}|[0-9]{1,2})\.){2}(25[0-5]|2[0-4][0-9]|1[0-9]{2}|[0-9]{1,2})\]?$)/i)) ) {

          $(this).show();

          //$(this).html("|"+$("input[name="+id+"]").val()+"|");

          test = test && false;

        } else {

          $(this).hide();

        }

      });

      if ( !test ) { return false; }

    });

je to zavisle hlavne na class, name a id... podle toho se to ruzne mapuje.. (pro zmateni nepritele)

Nahlásit jako SPAM

IP: 212.136.56.–

_{Program vždy dělá to co naprogramujete, ne to co chcete...}

m->29+6

Super člen

8. 6. 2011 #5

Ja tu mám niečo v čistom JS. Je to celkom jednoduché, ale funguje to LEN na FF, čo mi stačilo keď som to písal.Inšpirovať sa ale myslím dá.

VALIDATE_RULES = {

  required : function() {

    return this.value.trim() !== '';

  },

  email : function() {

    if(this.value.trim() === '') {return true;}



    var atom = '[-a-z0-9!#$%&\'*+/=?^_`{|}~]',

        domain = '[a-z0-9]([-a-z0-9]{0,61}[a-z0-9])',

        email_re = new RegExp('^' +atom+ '+(\\.' +atom+ '+)*@(' +domain+ '?\\.)+' +domain+ '$');



    return email_re.test(this.value);

  },

  ic : function() {

    if(this.value.trim() === '') {return true;}

    if(!/^\d{8}$/.test(this.value)) {return false;}



    var a = 0, b = this.value.split(''), c = 0;



    for(var i=0; i<7; ++i) {

      a += parseInt(b[i], 10) * (8 - i);

    }

    a %= 11;

    c = 11 - a;

    if(a == 1) {c = 0;}

    if(a == 0 || a == 10) {c = 1;}

    

    return parseInt(b[7], 10) == c;

  },

  phone : function () {

    if(this.value.trim() === '') {return true;}

    return /^\+?\d+$/.test(this.value);

  },

  address : function() {

    if(this.value.trim() === '') {return true;}

    return /^.+\s+\d+(?:\/\d+)?,\s*.+$/.test(this.value);

  },

  psc : function() {

    if(this.value.trim() === '') {return true;}

    return /^\d{5}$/.test(this.value);

  },

  maxlength : function(limit) {

    return this.value.length <= limit;

  },

  minlength : function(limit) {

    return this.value.length >= limit;

  }

};



function validateForm(evt) {

  var formInputs = evt.target.elements,

      isValidForm = true;

  VALIDATE_RULES.form = evt.target;



  for(var i=formInputs.length-1; i>=0; --i) {

    var input = formInputs[i];

    // fieldsets are undefined, but in FF4 are as fieldset

    if(input.type === 'undefined' || input.type === 'fieldset') {continue;}

    if(input.disabled) {continue;}

    var classes = input.className.split(/\s+/);



    input.classList.remove('formfield-invalid');

    for(var j=classes.length-1; j>=0; --j) {

      var classItems = classes[j].split('-');

      if(classItems[0] !== 'formrule') {continue;}



      var valiationFunc = VALIDATE_RULES[classItems[1]],

          args = classItems.slice(2);

      if(!valiationFunc.apply(input, args)) {

        input.classList.add('formfield-invalid');

        isValidForm = false;

        break;

      }

    }

  }



  var warnMsg = 'Ve formuláři byly detekovány chyby! Chcete formulář odeslat i tak?';

  if(!isValidForm && !confirm(warnMsg)) {evt.preventDefault();}

}

<form onsubmit="validateForm(event);" action="hhh"> 

<p> 



Jméno: <input class="formrule-required" type="text" name="01Jméno" value="" /> 

Email: <input class="formrule-required formrule-email" type="text" id="email" name="02Email" value="" /> 

Zpráva: <textarea class="formrule-maxlength-300" id="zprava" name="03Zpráva" rows="6" cols="50"></textarea> 

<input type="submit" value="Odeslat" />

</p>

</form>

Nie je to moc dobre vymyslené a existujú lepšie riešenia, ale pre začiatok a ako inšpirácia je to asi fajn. Lepšie by ale bolo validovať na základe atribútu name príslušných elementov a predávať pravidlá ako objekty. Tak to robia aj skoro všetky pluginy do jQuery.

Nahlásit jako SPAM

IP: 83.240.51.–

pepagrafik

~ Anonymní uživatel
~ 7 příspěvků

9. 6. 2011 #6

tak sem asi lempl, ale mě to pořád nejde

Nahlásit jako SPAM

IP: 85.71.109.–

m->29+6

Super člen

10. 6. 2011 #7

Tak to robíš niečo zle. Pošli link na stránku kde to máš a niekto ti na to pozrie ;-)

Nahlásit jako SPAM

IP: 83.240.51.–

pepagrafik

~ Anonymní uživatel
~ 7 příspěvků

10. 6. 2011 #8

tady to je: http://chorvatsko-info.czechian.net/Kontakt.html

Nahlásit jako SPAM

IP: 85.71.109.–

pepagrafik

~ Anonymní uživatel
~ 7 příspěvků

10. 6. 2011 #9

pls hepl :D

Nahlásit jako SPAM

IP: 85.71.109.–

pepagrafik

~ Anonymní uživatel
~ 7 příspěvků

10. 6. 2011 #10

jestli byste byli tak hodni a neopravili mi ten kod

Nahlásit jako SPAM

IP: 85.71.109.–

m->29+6

Super člen

10. 6. 2011 #11

Pozri si regulárne výrazy aby si to pochopil:

function formular()

{

if(document.getElementById("email").value.length==0){

alert("Na něco si zapoměl kamo.");

document.getElementById("email").focus();

return false;

}

var atom = '[-a-z0-9!#$%&\'*+/=?^_`{|}~]', 

        domain = '[a-z0-9]([-a-z0-9]{0,61}[a-z0-9])', 

        email_re = new RegExp('^' +atom+ '+(\\.' +atom+ '+)*@(' +domain+ '?\\.)+' +domain+ '$');

var obsah = document.getElementById("zprava").value;

if(!email_re.test(obsah)) {

alert("Na něco si zapoměl kamo.");

document.getElementById("zprava").focus();

return false;

}

return true;

}

Nahlásit jako SPAM

IP: 83.240.51.–

pepagrafik

~ Anonymní uživatel
~ 7 příspěvků

11. 6. 2011 #12

to mi nejde už vubec...nechapu to...:-(
podívejte se mi na to nekdo prosimvás a kdyžtak mi opravte chybu...díky :((

<script type="text/javascript">
function formular()

{

if(document.getElementById("email").value.length==0){

alert("Na něco si zapoměl kamo.");

document.getElementById("email").focus();

return false;

}

var atom = '[-a-z0-9!#$%&\'*+/=?^_`{|}~]',

domain = '[a-z0-9]([-a-z0-9]{0,61}[a-z0-9])',

email_re = new RegExp('^' +atom+ '+(\\.' +atom+ '+)*@(' +domain+ '?\\.)+' +domain+ '$');

var obsah = document.getElementById("zprava").value;

if(!email_re.test(obsah)) {

alert("Na něco si zapoměl kamo.");

document.getElementById("zprava").focus();

return false;

}

return true;

}
}</script>
<form onsubmit="return formular()" action="blabla">
<p>

Jméno: <input type="text" name="01Jméno" value="" />
Email: <input type="text" id="email" name="02Email" value="" />
Zpráva:<textarea id="zprava" name="03Zpráva" rows="6" cols="50"></textarea>
<input type="submit" value="Odeslat" />