Best method for "Form"-Validation (Javascript)

Question

Hy!

In my Script, i validate all User-Input in a Form like the Code below. Now, for smaller forms like this, its not too much, i think.

But is there any other "better" or less-code way doing this, or is this a "noob"-way ?

It works fine, btw..

<!-- Originalwerte -->
   ori_edit_spitzname = $('#edit_spitzname').val();
   ori_edit_gebtag = $('#edit_gebtag').val();
   ori_edit_handy = $('#edit_handy').val();
   ori_edit_herkunft = $('#edit_herkunft').val();
  
   <!-- FORM PRÜFEN -->
   form_error = false;
   form_changed = false;
 
      // Spitzname 
      $('input[name=edit_spitzname]').change(function() {  
        if ($('#edit_spitzname').val().length > 0 && $('#edit_spitzname').val().length < 2) {
        alert("Spitzname muss leer, oder minimal 2 Buchstaben lang sein!"); 
        $('#edit_spitzname').css({'color': 'red', 'border-color' : 'red'});
        $('#edit_spitzname').focus();
        form_error = true;
        } else {
        $('#edit_spitzname').css({'color': 'green', 'border-color' : 'green'});
        form_error = false;
        }
       is_changed_general();  
       });
       
       // Geburtstag
      $('input[name=edit_gebtag]').change(function() {  
        if (!validatebirthday($('#edit_gebtag').val(), ".")) {
        alert("Falsches Geburtstagsformat!\nDD.MM.YYYY"); 
        $('#edit_gebtag').css({'color': 'red', 'border-color' : 'red'});
        $('#edit_gebtag').focus();
        form_error = true;
      } else {
        $('#edit_gebtag').css({'color': 'green', 'border-color' : 'green'});
        form_error = false; }
       is_changed_general();  
       });
       
        // Handynummer
       $('input[name=edit_handy]').change(function() {  
       alert($('#edit_handy').val().substr(0, 2));
        if ($('#edit_handy').val().substr(0, 2)!="43") {
        alert("Handynummer MUSS mit 43 beginnen!\n43660123456"); 
        $('#edit_handy').css({'color': 'red', 'border-color' : 'red'});
        $('#edit_handy').focus();
        form_error = true;
      } else {
        $('#edit_handy').css({'color': 'green', 'border-color' : 'green'});
        form_error = false; }
       is_changed_general();  
       });

      // Herkunft 
      $('input[name=edit_herkunft]').change(function() {  
        if ($('#edit_herkunft').val().length<4) {
        alert("Ein Herkunftsort muss angegeben werden! (Min 3 Buchstaben!)"); 
        $('#edit_herkunft').css({'color': 'red', 'border-color' : 'red'});
        $('#edit_herkunft').focus();
        form_error = true;
        } else {
        $('#edit_herkunft').css({'color': 'green', 'border-color' : 'green'});
        form_error = false;
        }
       is_changed_general();  
       });
      
      // Speichern-Button nur anzeigen wenn änderung und kein Fehler!
      function is_changed_general() {
      if (!form_error) {
       
       var general_changed = false; 
       
      if (ori_edit_spitzname!=$('#edit_spitzname').val()) { general_changed = true;  } 
       else { $('#edit_spitzname').css({'color': 'black', 'border-color' : '#404040'}); }
      if (ori_edit_gebtag!=$('#edit_gebtag').val()) { general_changed = true;  } 
       else { $('#edit_gebtag').css({'color': 'black', 'border-color' : '#404040'}); }
      if (ori_edit_handy!=$('#edit_handy').val()) { general_changed = true;  } 
       else { $('#edit_handy').css({'color': 'black', 'border-color' : '#404040'}); }
      if (ori_edit_herkunft!=$('#edit_herkunft').val()) { general_changed = true;  } 
       else { $('#edit_herkunft').css({'color': 'black', 'border-color' : '#404040'}); }
       
       if (general_changed) {
       // EINBLENDEN
       $('#gen_sendbutton').css('display', 'block');
       } else {
       // AUSBLENDEN
       $('#gen_sendbutton').css('display', 'none');
       }
      
      } else {
       // Ausblenden
       $('#gen_sendbutton').css('display', 'none');

      }
       general_changed = false;
      }
 
    // Wenn kein Fehler, Formular absenden
    function send_edit_general() {
      if (form_error==true) { alert("Bitte alle Eingaben prüfen!"); } else {
      alert("Daten würden jetzt gespeichert werden, alle Eingaben OK !"); 
      }
    }

.memb_col {
 width:550px;
}

.memb_col_0 {
 width:550px;
 float:left;
 font-size:1.2em;
 font-style:italic;
}

.memb_col_0_1 {
 width:550px;
 float:left;
 padding-top: 10px;
}

.memb_col_1 {
 width:140px;
 float:left;
 padding-top: 6px;
 font-weight:bold;

}

.memb_col_2 {
 width:410px;
 float:left;
 padding-top: 6px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.4/jquery-ui.min.js"></script>
<link href="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.4/themes/smoothness/jquery-ui.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>


<div class="memb_col clearfix">
                    <div class="memb_col_0">Persönliches:<br></div>

                    <div class="memb_col_1">Vorname</div>
                    <div class="memb_col_2">Christoph</div>
                    
                    <div class="memb_col_1">Nachname</div>
                    <div class="memb_col_2">Eder</div>
 
                    <div class="memb_col_1">Spitzname</div>
                    <div class="memb_col_2"><input type="text" name="edit_spitzname" id="edit_spitzname" value="" class="ui-widget ui-widget-content ui-corner-all"></div>
                    
                    <div class="memb_col_1">Geburtstag</div>
                    <div class="memb_col_2"><input type="text" name="edit_gebtag" id="edit_gebtag" value="04.05.1990" class="ui-widget ui-widget-content ui-corner-all hasDatepicker"></div>
                    
                    <div class="memb_col_1">Handynummer</div>
                    <div class="memb_col_2"><input type="text" name="edit_handy" id="edit_handy" value="4366123456789" class="ui-widget ui-widget-content ui-corner-all"></div>
                    
                    <div class="memb_col_1">Telegram-ID</div>
                    <div class="memb_col_2">123456</div>
                    
                    <div class="memb_col_1">Wohnort</div>
                    <div class="memb_col_2"><input type="text" name="edit_herkunft" id="edit_herkunft" value="Example City" class="ui-widget ui-widget-content ui-corner-all"></div>
                    
                                     
                    <div class="memb_col_0"><br><input type="button" style="display:none;" id="gen_sendbutton" onclick="send_edit_general()" value="Änderungen speichern #dummy" class="ui-widget ui-widget-content ui-corner-all"></div>
    </div>

It doesn't looks like your question is about a specific programming problem to be solved, so the question is off-topic for Stack Overflow. If you want general improvements, then delete this question and ask on [codereview.se] instead. — 200_success, Jul 12 '15 at 06:25
Its a Question, because i search for the best way to validate different forms, my snipped is only for showing, how i did it.. — C.E., Jul 12 '15 at 06:27

score 1 · Accepted Answer · edited May 23 '17 at 12:29

1

You can use a client side form validation library like http://jqueryvalidation.org/ Read Best JavaScript solution for client-side form validation and interaction? for more details.

edited May 23 '17 at 12:29

Community

1
1

answered Jul 12 '15 at 06:28

Rafael Nogueira

3,520
1
13
13

Best method for "Form"-Validation (Javascript)

1 Answers1