javascript - Kontrollere input type="text" uden submit - Udvikleren.dk

Tags: javascript

<< < 1 2 > >>

Bruger #16723 @ 27.03.16 11:28

Håber I kan hjælpe mig :-) gerne med et eksempel
Hvordan kontrollere jeg name="mail" for eksempel 10 gange i sek. Om den indenholder et @, og så den skriver ved siden af feltet : Du mangler et @

HTML kode

 <form >
  Mail: <input type="text" name="mail" value="-">
  <input type="submit" value="Submit form">
 </form>

15 svar postet i denne tråd vises herunder
0 indlæg har modtaget i alt 0 karma

Sorter efter stemmer Sorter efter dato

Bruger #16075 @ 29.03.16 17:00

1.223

Kan javascript ikke samles et sted ?

jo, saml det i bunden så du er sikker på at hele HTML ducumentet er på plads

og hvorfor skal koden være før </head> ?

det behøver den heller ikke, du kan sagtens lægge functionen ned lige før // add event listener
reglen er at et HTML element, og js function skal være læst før den kaldes.

jeg er bare af den gamle skole der lærte pascal, c, c++, og der skal alle kald gå op af i programmet, så der ligger man functionerne i toppen / externe filer der includeres i toppen. og jeg vil gerne have mine functioner samlet.

Bruger #17081 @ 31.03.16 22:32

1.258

@Ronny noget i den her stil måske:

HTML kode

 <!DOCTYPE html>
 <html>
     <head>
         <meta charset="utf-8">
         <title>demo</title>
         <link href="style.css" type="text/css" rel="Stylesheet">
     </head>
     <body>
         <form class="" action="" method="post">
             <fieldset>
                 <label>Brugernavn:</label>
                 <input type="text" name="username" data-validate="empty" value="">
             </fieldset>
 
             <fieldset>
                 <label>E-mail:</label>
                 <input type="text" name="email" data-validate="empty email" value="">
             </fieldset>
 
             <fieldset>
                 <button type="submit" name="button">Afsend</button>
             </fieldset>
         </form>
 
         <script>
         ;(function() {
 
 
             function showMsg(msg) {
                 var parent = this.parentNode,
                     oldMsg = parent.querySelector('.message');
 
 
                 if ( oldMsg !== null ) {
                     parent.removeChild(oldMsg);
                 }
 
                 var span = document.createElement('span'),
                     txt = document.createTextNode(msg.message);
 
                 span.classList.add(msg.cls);
                 span.classList.add('message');
 
                 span.appendChild(txt);
                 parent.appendChild(span);
             }
 
 
             function validate(event) {
                 var checks = this.getAttribute('data-validate'),
                     errors = false,
                     self = this;
 
                 if ( !checks ) {
                     return;
                 }
 
                 checks.split(" ").forEach(function(item, i){
                     if ( !validators.hasOwnProperty(item) ) {
                         return;
                     }
 
                     if ( !validators[item].call(self) ) {
                         errors = true;
                     }
                 });
 
                 var message = (errors)
                     ? { 'cls' : 'error', 'message' : 'Forkert' }
                     : { 'cls' : 'ok', 'message' : 'Ok' };
 
                 is_valid = !errors;
 
                 showMsg.call(this, message);
             }
 
             var is_valid = false,
                 validators = {
                     email : function() {
                         return this.value.indexOf('@') > -1;
                     },
 
                     empty : function () {
                         return this.value.length;
                     }
                 },
                 elements = document.querySelectorAll('form input');
 
 
             Array.prototype.forEach.call(elements, function(el, i){
                 el.addEventListener('input', validate.bind(el), false);
             });
 
             document.querySelector("form").addEventListener('submit', function(event) {
                 if ( !is_valid ) {
                     event.preventDefault();
                     event.stopPropagation();
                 }
             }, false);
         })();
         </script>
     </body>
 </html>

Indlæg senest redigeret d. 31.03.2016 22:33 af Bruger #17081

Bruger #16723 @ 01.04.16 09:27

@Ronny noget i den her stil måske:

HTML kode

 <!DOCTYPE html>
 <html>
     <head>
         <meta charset="utf-8">
         <title>demo</title>
         <link href="style.css" type="text/css" rel="Stylesheet">
     </head>
     <body>
         <form class="" action="" method="post">
             <fieldset>
                 <label>Brugernavn:</label>
                 <input type="text" name="username" data-validate="empty" value="">
             </fieldset>
 
             <fieldset>
                 <label>E-mail:</label>
                 <input type="text" name="email" data-validate="empty email" value="">
             </fieldset>
 
             <fieldset>
                 <button type="submit" name="button">Afsend</button>
             </fieldset>
         </form>
 
         <script>
         ;(function() {
 
 
             function showMsg(msg) {
                 var parent = this.parentNode,
                     oldMsg = parent.querySelector('.message');
 
 
                 if ( oldMsg !== null ) {
                     parent.removeChild(oldMsg);
                 }
 
                 var span = document.createElement('span'),
                     txt = document.createTextNode(msg.message);
 
                 span.classList.add(msg.cls);
                 span.classList.add('message');
 
                 span.appendChild(txt);
                 parent.appendChild(span);
             }
 
 
             function validate(event) {
                 var checks = this.getAttribute('data-validate'),
                     errors = false,
                     self = this;
 
                 if ( !checks ) {
                     return;
                 }
 
                 checks.split(" ").forEach(function(item, i){
                     if ( !validators.hasOwnProperty(item) ) {
                         return;
                     }
 
                     if ( !validators[item].call(self) ) {
                         errors = true;
                     }
                 });
 
                 var message = (errors)
                     ? { 'cls' : 'error', 'message' : 'Forkert' }
                     : { 'cls' : 'ok', 'message' : 'Ok' };
 
                 is_valid = !errors;
 
                 showMsg.call(this, message);
             }
 
             var is_valid = false,
                 validators = {
                     email : function() {
                         return this.value.indexOf('@') > -1;
                     },
 
                     empty : function () {
                         return this.value.length;
                     }
                 },
                 elements = document.querySelectorAll('form input');
 
 
             Array.prototype.forEach.call(elements, function(el, i){
                 el.addEventListener('input', validate.bind(el), false);
             });
 
             document.querySelector("form").addEventListener('submit', function(event) {
                 if ( !is_valid ) {
                     event.preventDefault();
                     event.stopPropagation();
                 }
             }, false);
         })();
         </script>
     </body>
 </html>

Det er godt nok meget kode ;-) til et lille problem

Bruger #17081 @ 01.04.16 18:16

1.258

Det kunne være mindre med jQuery. Men det bruger du hvis ikke. Men jeg har også lavet det til en komponent, så det nemt kan udvides med andre tests

Bruger #21210 @ 10.04.16 09:55

Hvad med:

HTML kode

 <form>
  Mail: <input type="text" name="mail" value="-" onblur="tjekFunk(this.value);">
  <input type="submit" value="Submit form">
  <span id="returfelt"></span>
  <script>
   function tjekFunk(streng) {
    var returFelt = document.getElementById("returfelt");
    if(streng.indexOf("@") === -1) {
     returFelt.innerHTML = "Du mangler et snabela!";
     }
    }
  </script>
 </form>

Alternativt kan du tjekke strukturen af hele feltet med et regulært udtryk:

HTML kode

 <form id="formfelt">
  Mail: <input id="mailfelt" type="text" name="mail" value="-">
  <button onclick="tjekFunk(this.value);">Submit</button>
  <span id="returfelt"></span>
  <script>
   function tjekFunk(streng) {
    var returFelt = document.getElementById("returfelt");
    var mailFelt = document.getElementById("mailfelt");
    var formFelt = document.getElementById("formfelt");
    var matchMail = mailFelt.value.match(/[a-zA-Z]+\@[a-zA-Z]+\.[a-z]+/);
    if(matchMail === null || 
       matchMail[0].length !== mailFelt.value.length) {
     returFelt.innerHTML = "Din mailadresse er angivet forkert!";
     }
    else {
     returFelt.innerHTML = "Tillykke og alt det der!";
     formFelt.submit();
     }
    }
  </script>
 </form>

Ideen i at bruge en button i stedet for submit er at brugeren ikke når at se fejlen før formen sender denne videre til næste side ellers.

Edit: den sidste er måske bedst sådan her:

HTML kode

 <form id="formfelt">
   Mail: <input id="mailfelt" onkeyup="tjekFunk(this.value);" type="text" name="mail" value="">
   <span id="returfelt"></span><br>
   <input type="submit" disabled="true" id="sendknap" value="Send"></input>
  </form>
  <script>
   function tjekFunk(streng) {
    var returFelt = document.getElementById("returfelt");
    var sendKnap = document.getElementById("sendknap");
    var matchMail = streng.match(/[a-zA-Z]+\@[a-zA-Z]+\.[a-z]+/);
    if(matchMail === null || 
     matchMail[0].length !== streng.length) {
      returFelt.innerHTML = "Din mailadresse er angivet forkert!";
      sendKnap.disabled = true;
      }
     else {
      returFelt.innerHTML = "Tillykke og alt det der!";
      sendKnap.disabled = false;
     }
    }
  </script>

Indlæg senest redigeret d. 10.04.2016 12:34 af Bruger #21210

<< < 1 2 > >>

Kontrollere input type="text" uden submit

Karma barometer (30 dage)

Modtaget

Givet

Favorit hos
Forum tråde
Artikler