Javascript-Validierung für alle Felder mit Required-Attribut

Ich habe gesucht hoch und niedrig für die Antwort, aber kann es nicht finden überall.

Ich habe ein Formular, welches die HTML 'erforderlich' Attribute und es macht einen guten job der Hervorhebung der Felder, müssen ausgefüllt werden, bevor die Einreichung...oder würde es tun, aber das system, das meine form ist verschraubt (von denen ich keine Kontrolle habe) das Formular sendet sowieso nach ein paar Sekunden. Es basiert auf Javascript, es ist Unterwerfung. Daher möchte ich schreiben, ein Javascript-Skript überprüfen Sie alle Felder, die für ein erforderliches Attribut. Derzeit habe ich ein Skript, die gibt die Felder will ich zwingend, aber wenn es Aussehen könnte, bis das Attribut statt, das wäre genial.

InformationsquelleAutor nbren007 | 2014-08-14

  1. 14

    In Fall, dass input[type=submit] verwendet wird, müssen Sie keine JavaScript -

    <form id="theForm" method="post" acion="">
  <input type="firstname" value="" required />
  <input type="lastname" value="" required />
  <input type="submit" name="submit" value="Submit" />  
</form>

    Arbeiten jsBin

    Aber wenn input[type=button] wird verwendet, um ein Formular zu verschicken, verwenden Sie das Codefragment unten 

    <form id="theForm" method="post" acion="">
  <input type="firstname" value="" required />
  <input type="lastname" value="" required />
  <input type="button" name="button" value="Submit" />  
</form>

window.onload = function () {
  var form = document.getElementById('theForm');
  form.button.onclick = function (){
    for(var i=0; i < form.elements.length; i++){
      if(form.elements[i].value === '' && form.elements[i].hasAttribute('required')){
        alert('There are some required fields!');
        return false;
      }
    }
    form.submit();
  }; 
};

    Wotking jsBin

    InformationsquelleAutor hex494D49

  2. 1

    diese werden überprüfen Sie alle Ihre Formular-Feldtypen

    $('#submitbutton').click(function (e) {
    e.preventDefault();

    var form = document.getElementById("myForm");
    var inputs = form.getElementsByTagName("input"), input = null, select = null, not_pass = false;
    var selects = form.getElementsByTagName("select");
    for(var i = 0, len = inputs.length; i < len; i++) {
        input = inputs[i];

        if(input.type == "hidden") {

            continue;
        }

        if(input.type == "radio" && !input.checked) {
            not_pass = true;
        } 
        if(input.type == "radio" && input.checked){
            not_pass = false;
            break;
        }

        if(input.type == "text" && !input.value) {
            not_pass = true;
        } 
        if(input.type == "text" && input.value){
            not_pass = false;
            break;
        }

        if(input.type == "number" && !input.value) {
            not_pass = true;
        } 
        if(input.type == "number" && input.value){
            not_pass = false;
            break;
        }

        if(input.type == "email" && !input.value) {
            not_pass = true;
        } 
        if(input.type == "email" && input.value){
            not_pass = false;
            break;
        }

        if(input.type == "checkbox" && !input.checked) {
            not_pass = true;
        } 
        if(input.type == "checkbox" && input.checked) {
            not_pass = false;
            break;
        }
    }

    for(var i = 0, len = selects.length; i < len; i++) {
        select = selects[i];
        if(!select.value) {
            not_pass = true;
            break;
        } 
    }

    if (not_pass) {
        $("#req-message").show();//this div # in your form
        return false;
    } else {
     //do something here 
    }
});

    InformationsquelleAutor Jason Liu

Schreibe einen Kommentar