HTML5本地存储，验证所需的文本框问题

Question

I have a survey. On button click need it to validate certain fields required/store locally/ go to confirmation page(to prevent user from resubmitting). Only 'FirstName''Hostipal' required atm.

Problem is when all required fields are filled, it fails to go to confirmation.html. If i leave 1 required field open, It doesnt validate and goes to confirmation. If all 'required' syntax is taken out, It doesnt go to confirmation

<label>First Name*:</label> <input required title="Name is required" id="FirstName" name="MainName" type="text"/>

In all cases, It still stores to local storage however. Any input on validating required fields would be appreciated. Hopefully can put it in my clicked() function.

<button type="submit" value="Save" id="Save" >Submit Form</button>  

function

$( document ).ready(function() {
    $('#Save').click(function (e) {
        if (confirm('Are you sure you want to submit? You will not be able to go back.')) {
            var person = $("#FirstName").val() + "." + $('#LastName').val();
            $('input, select, textarea').each(function () {
                var value = $(this).val(),
                    name = $(this).attr('name');
                localStorage[person + "." + name] = value;
                window.location.href = "Confirmation.html";
                console.log('stored key: ' + name + ' stored value: ' + value);
            });

        }
    });
});

If the above doesn't show my problem, here is the whole: http://jsfiddle.net/smZHe/1/

Answer 1

each helper method in jquery executes the function we pass to it once for each item in the initial array. You are trying to execute below statement multiple times (once for each input, select, textarea).

window.location.href = "Confirmation.html";

You can use a variable instead as flag to mark validation failure. In the end, you can check variable and navigate conditionally.