Правила настройки для формы

Question

Итак, мне нужна функция, чтобы проверить, применяются ли правила, которые я применил к параметрам, которые у меня есть в моей форме.

Первый ящик - это поле имени, и оно должно содержать по крайней мере три буквы и содержать хотя бы одно пробелы для прохождения. В другом поле есть возраст, он должен иметь число от 1 до 125, я могу сделать это самостоятельно, но я думаю, что может быть хороший способ установить все правила сразу, поэтому я думал, что буду включите его.

Третий вариант - это набор из трех переключателей, из которых нужно выбрать, а четвертый - информационное окно, которое должно состоять из текста с по меньшей мере 30 буквами. Эти правила должны быть проверены на нажатие кнопки, это то, как далеко я получил от себя:

var sendButton = $("button:first").addClass("sendButton"); 
var age = document.getElementsByName('age')[0].value; 

sendButton.click(function(){ 
    var infoName = document.getElementsByName('infoName')[0].value; 
    if (infoName.length<3){ 
    console.log("Your name must consist of at least three letters and contain a whitespace"); 
    }; 
    } 
}); 


     <section class="column"> 
     <h2>Contact us</h2> 
     <form action="#"> 
      <fieldset> 
       <legend>Form</legend> 
       <div class="textinput"> 
        <label for="infoName">Ditt namn:</label> 
        <input type="text" name="infoName" placeholder="ex. John Doe"> 
       </div> 

       <div class="textinput"> 
        <label for="infoName">Din ålder:</label> 
        <input type="text" name="age" placeholder="ex. 25"> 
       </div> 

       <div class="radioSelection"> 
        <label>Choose your favorite</label>    
        <input type="radio" name="favorite" id="html" value="html"> 
        <label for="html">HTML</label> 
        <input type="radio" name="favorite" id="js" value="js"> 
        <label for="js">JavaScript</label> 
        <input type="radio" name="favorite" id="css" value="css"> 
        <label for="css">CSS</label> 
       </div> 

       <div class="textareainput"> 
        <label for="info">Info about you:</label> 
        <textarea placeholder="Type something about yourself, this area must contain 30 letters or more"></textarea> 
       </div> 

       <div class="action"> 
        <button>Send</button> 
       </div> 

Answer 1

function validateForm(){ 
    var infoName = document.getElementsByName('infoName')[0].value; 
    var age= document.getElementsByName('age')[0].value; 
    var favourites = document.getElementsByName('favorite'); 

    var problems = 0; 

    if(infoName.length < 3){ 
     // Failed length validation 
     problems++; 
    } 

    var spaceIndex = infoName.indexOf(' '); 

    if(spaceIndex === -1){ 
     // Name does not contain a space. 
     problems++; 
    } 
    else if(spaceIndex === 0){ 
     // Name begins with space 
     problems++; 
    } 
    else if(spaceIndex === infoName.length - 1){ 
     // Space is last character. 
     problems++; 
    }   

    var hasCheck = false; 
    for(var i = 0; i < favourites.length; i++){ 
     if(favourites[i].checked){ 
      hasCheck = true; 
      break; 
     } 
    } 

    if(!hasCheck){ 
     // No radio button has been checked. 
     problems++; 
    } 

    var ageNum = parseInt(age); 
    if(isNaN(ageNum)) { 
     // Age is not a number 
     problems++; 
    } 
    else if(ageNum < 1 || ageNum > 125){ 
     // Age is not within boundaries 
     problems++; 
    } 

    /// etc etc, for all your validations. 

    return problems === 0; 
} 

В конце проверки, если какие-либо проблемы обнаруживаются, то форма будет не представляется (поскольку problems === 0 является ложным). Также проверка количества, которую я вложил, не очень надежна. Отъезд this question, который подробно идет о проверке числа.

Метод проверки должен быть вызван представлением формы, а не при нажатии на кнопку

$('form').submit(function(e){ 
    var valid = validateForm(); 
    if(!valid){ 
     e.preventDefault(); 
     return false; 
    } 
});