JavaScript表單驗證功能：循環每個項目

Question

我有一個表單輸入元素的列表，我想運行一個循環。從結果中，我需要運行一些條件語句，以便我們可以使用它們的名稱屬性來驗證它們。我已經使用jQuery，並使用。每個方法循環它們。因此我可以添加/刪除類名到無效的輸入元素。

用文字描述很難。但代碼塊波紋管纔有意義：

JSFiddle

function formValid() { 
 
    var valid = true; 
 

 
    $('form input').each(function() { 
 
    if ($(this).val() == '') { 
 
     valid = false; 
 
     $(this).addClass('red-border'); 
 
    } else if (true /* if "tel" is not a number */) { // <- here I want to validate using input name attribute 
 
     valid = false; 
 
     $(this).addClass('red-border'); 
 
    } else { 
 
     $(this).removeClass('red-border'); 
 
    } 
 
    }); 
 

 
    return valid; 
 
} 
 

 
$('form').on('submit', function(event) { 
 
    event.preventDefault(); 
 

 
    if (formValid()) { 
 
    alert('Yay!'); 
 
    } 
 
});

.red-border { 
 
    border-color: red !important; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<form action="#"> 
 

 
    <p> 
 
    <input type="text" name="name"> 
 
    </p> 
 
    <p> 
 
    <input type="text" name="tel"> 
 
    </p> 
 
    <p> 
 
    <input type="text" name="email"> 
 
    </p> 
 

 
    <p> 
 
    <button type="submit">Submit</button> 
 
    </p> 
 

 
</form>

Answer 1

退房小提琴 https://jsfiddle.net/t9ayvken/

CSS：

.red-border { 
    border-color: red; 
} 

HTML：

<form action="#"> 

    <p> 
    <input class="must-validate" type="text" name="name"> 
    </p> 
    <p> 
    <input class="must-validate" type="text" name="tel"> 
    </p> 
    <p> 
    <input class="must-validate" type="text" name="email"> 
    </p> 

    <p> 
    <button type="submit">Submit</button> 
    </p> 

</form> 

JQuery：

/*validation functions for each input type*/ 
function validateName(event){ 
    var $this = $(this); 
    /* validation is done here */ 
    if(false){ 
    $this.removeClass('red-border'); 
    } 
    else { 
    /* not valid*/ 
    $this.addClass('red-border'); 
    } 
} 
function validateTel(event){ 

} 
function validateEmail(event){ 

} 

/*add validation event handlers*/ 
$(document).on('validate','[name="name"]',validateName); 
$(document).on('validate','[name="tel"]',validateTel); 
$(document).on('validate','[name="email"]',validateEmail); 


function formValid() { 
    var valid = true; 

    /*Trigger validation events for all required inputs*/ 
    $('input.must-validate').trigger('validate'); 


/* After validation is complete check to see if any are invalid */  
    if($('input.must-validate.red-border').length){ 
    alert('the form is invalid'); 
    valid = false; 
    } 

    return false; 
    //return valid; 
} 

$('form').on('submit', function(event) { 
    event.preventDefault(); 

    if (formValid()) { 
    alert('Yay!'); 
    } 
}); 

Answer 2

我建議返回錯誤，而不是一個布爾標誌的列表。

function formValid() { 
 
    var errorMsgs = []; 
 

 
    $('form input').each(function() { 
 
    var msg = [], 
 
     val = $(this).val(); 
 
    
 
    // Check blanks 
 
    if (val == '') 
 
     msg.push(`${$(this).attr('name')} is blank`); 
 
    
 
    // Check numbers 
 
    if ($(this).attr('name') === 'tel' && isNaN(val)) 
 
     msg.push(`${$(this).attr('name')} is not a number`); 
 
    
 
    // Handle results 
 
    if (msg.length > 0){ 
 
     errorMsgs.push(...msg); 
 
     $(this).addClass('red-border'); 
 
    } else { 
 
     $(this).removeClass('red-border'); 
 
    } 
 
    }); 
 

 
    return errorMsgs; 
 
} 
 
$('button').on('click', function(event) { 
 

 
    var errors = formValid(); 
 
    if (errors.length === 0) { 
 
    alert('Yay!'); 
 
    } else { 
 
    alert(errors.join('\r')); 
 
    } 
 
});

.red-border { 
 
    border-color: red !important; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<form action="#"> 
 

 
    <p> 
 
    <input type="text" name="name"> 
 
    </p> 
 
    <p> 
 
    <input type="text" name="tel"> 
 
    </p> 
 
    <p> 
 
    <input type="text" name="email"> 
 
    </p> 
 

 
    <p> 
 
    <button type="submit">Submit</button> 
 
    </p> 
 

 
</form>