Szukałem wysokiej i niskiej odpowiedzi na to, ale nie mogę go nigdzie znaleźć.

Mam formularz, który ma atrybuty HTML "wymagane" i robi dobrą robotę podświetlania pól, które muszą wypełnić przed złożeniem ... lub zrobiłoby, ale system, który moja forma jest przykręcona na (z czego mam Nie ma kontroli przez kilka sekund, przesyła formularz. Opiera się na JavaScript, aby go zgłoszeni. Dlatego chciałbym napisać skrypt JavaScript, aby sprawdzić wszystkie pola dla wymaganego atrybutu. Obecnie mam skrypt, który określa pola, które chcę być obowiązkowe, ale jeśli może to sprawdzić atrybut, to byłoby genialne.

18
nbren007 14 sierpień 2014, 19:29

2 odpowiedzi

Najlepsza odpowiedź

W przypadku, gdy używany jest Wejście [Type = Wyślij] , nie potrzebujesz 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>

Praca jsbin

Ale jeśli wkład [Type = przycisk] jest używany do przesyłania formularza, użyj fragmentu poniżej

<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();
  }; 
};

Praca JS Bin

21
hex494D49 14 sierpień 2014, 16:03

Walidowanie wszystkich typów pola formularzy

$('#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 
    }
});
1
Jason Liu 16 październik 2017, 20:28