Question

所以，我需要一个函数来检查我所制定的规则是否适用于我在表单中的选项。

第一个框是一个名称框，它需要至少有三个字母，并且至少包含一个要传递的空格。另一个盒子是年龄，它需要有一个介于1到125之间的数字，我可以自己做，但我认为可能有一个很好的方法来设置所有规则，所以我想我＆＃ 39;包括它。

第三个选项是一组三个单选按钮，其中一个必须被选中，第四个框是一个信息框，应该包含至少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为false）。我在那里进行的数字验证也不是很强大。查看this question，其中详细了解了数字验证。

应在提交表单时调用验证方法，而不是在单击按钮时调用

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

在表单上设置规则

1 个答案: