驗證后將值發布到警報框

Question

我有這個表格，其中有很多驗證。

我正在努力解決的是，當所有字段都正確填寫后，我希望字段的值顯示在警報框中。

這是我的代碼

<form method="post" name="form" id="form" class="form" action="">

            <div class="info  align-right"><span class="error">*</span> Required</div>

            <fieldset>
                <div class="group">
                    <label for="name">Name</label>
                    <input id="name" name="name" type="text" required />
                </div>

                <div class="group">
                    <label for="UserEmail">Email <span class="req">*</span></label>
                    <input type="text" name="UserEmail" id="UserEmail" value="" size="32" />
                </div>

                <div class="group">
                    <label>Password: <span class="req">*</span></label>
                    <input type="password" name="password" id="password" value="" size="32" />
                </div>

                <div class="group">
                    <label>Confirm Password: <span class="req">*</span></label>
                    <input type="password" name="password-check" id="password-check" value="" size="32" />
                </div>
            </fieldset>

            <fieldset class="clearfix">

                <div class="group  options">
                    <legend>Country</legend>
                    <div class="group--left">
                        <input id="usa" name="country" type="radio">
                        <label for="usa">United States</label>

                        <input id="argentina" name="country" type="radio">
                        <label for="argentina">Argentina</label>
                    </div>
                </div>

                <div class="group">
                    <label>Phone Number</label>
                    <div class="group--left">
                        <input id="phone" name="phone" class="phone" type="tel" />
                        <em>Example: <span id="example">123-456-7890</span></em>
                    </div>
                </div>

            </fieldset>
                <div class="group--right">
                    <input type="submit" value="Submit" id="submit" class="right" />
                    <input type="reset" value="Clear" id="clear" class="left" />
                </div>
            </form>

我的 HTML 是

<form method="post" name="form" id="form" class="form" action="">

            <div class="info  align-right"><span class="error">*</span> Required</div>

            <fieldset>
                <div class="group">
                    <label for="name">Name</label>
                    <input id="name" name="name" type="text" required />
                </div>

                <div class="group">
                    <label for="UserEmail">Email <span class="req">*</span></label>
                    <input type="text" name="UserEmail" id="UserEmail" value="" size="32" />
                </div>

                <div class="group">
                    <label>Password: <span class="req">*</span></label>
                    <input type="password" name="password" id="password" value="" size="32" />
                </div>

                <div class="group">
                    <label>Confirm Password: <span class="req">*</span></label>
                    <input type="password" name="password-check" id="password-check" value="" size="32" />
                </div>
            </fieldset>

            <fieldset class="clearfix">

                <div class="group  options">
                    <legend>Country</legend>
                    <div class="group--left">
                        <input id="usa" name="country" type="radio">
                        <label for="usa">United States</label>

                        <input id="argentina" name="country" type="radio">
                        <label for="argentina">Argentina</label>
                    </div>
                </div>

                <div class="group">
                    <label>Phone Number</label>
                    <div class="group--left">
                        <input id="phone" name="phone" class="phone" type="tel" />
                        <em>Example: <span id="example">123-456-7890</span></em>
                    </div>
                </div>

            </fieldset>
                <div class="group--right">
                    <input type="submit" value="Submit" id="submit" class="right" />
                    <input type="reset" value="Clear" id="clear" class="left" />
                </div>
        </form>

我還提供了一個小提琴 - http://jsfiddle.net/barrycorrigan/vzdp64m4/

任何幫助是極大的贊賞

Answer 1

嘗試這樣的事情，

$("#form").submit(function(){
    var x = $(this).serializeArray();
    $.each(x, function(i, field){
        alert(field.name + " : " + field.value);
    });
});

FIDDLE 中的演示