Jquery自定义验证 - 最后一个表单字段未验证

时间:2012-09-26 15:09:47

标签: jquery validation error-handling

我在验证表单时遇到问题。 当我离开所有字段/ textarea的空白,从最后一个字体中排除时,我的表单对提交操作没有任何作用...当我只有一个textfield / textarea进行验证时,也会发生这种情况。我不知道这是怎么可能的,因为当我注销我的错误时,它会显示应该显示的所有错误,但它不会在页面本身上添加。 这是我的代码:

1)JQuery代码(这是在$(document).ready(function(ev){ initialiseValidation() });

中触发的
function initialiseValidation()
{

   $('form').each(function()
   {
        var validators = [];
        var form = $(this);
        var textfields = form.find("input[type]").not("input[type=submit]");
        var textareas = form.find("textarea");
        var formfields = $.merge(textfields, textareas);

        formfields.each(function()
        {
            var inputfield = $(this);
            var field = inputfield.find('[name=' + inputfield.attr('name') + ']');
            var type = inputfield.attr('type') == undefined ? 'textarea' : inputfield.attr('type');
            var label = inputfield.attr("name");


            function hide_feedback(message)
            {
                $('.errormessages').remove();
            }

            function show_feedback(message){
                    // Insert own error message
                $(".formulier").before($('<ul/>').addClass('errormessages contact').append($('<li/>').text(message)));
            }


            if(inputfield.length)
            {
                if (inputfield.is("input") || inputfield.is("textarea"))
                {

                    function validator()
                    {
                        var error = undefined;


                             if (!inputfield.val())
                                error = getMessageForLabel(label);

                            else if (label == 'email' && ! inputfield.val().match(/.+@.+\..+/))
                                error = "Gelieve een geldig e-mail adres in te geven.";

                            else if(label == "username" && checkUsername())
                                 error = "Username bestaat niet.";

                                hide_feedback();


                            if (error)
                            {
                                    show_feedback(error);
                                  throw new ValidationError(label, error, function () {
                                                                    field.focus();
                                                                    return false;
                                  });
                            }

                        }


                    // Validator for field.onchange
                    function quick_validate(event)
                    {
                        // Ignore tab-key
                        //log(event.keyCode);
                        if (event.keyCode != 9)
                        {

                            try {

                                validator();
                            }
                            catch(validation_error) {

                            }
                        }
                    }

                    inputfield.change(quick_validate).keyup(quick_validate).blur(quick_validate);

                    // Validator for form.submit
                    validators.push(validator);
                }
            }
        });


          $(this).submit(function(ev)
          {
                var errors = [];

                // Call all validators
                for (var v in validators)
                {
                    try {

                        validators[v]();
                    }
                    catch(validation_error)
                    {

                        errors.push(validation_error);
                    }
                }

               if (errors.length)
               {

                   $('.errormessages').empty();

                       for(var i in errors)
                       {
                           var msg = errors[i]['error_msg'];
                           $(".errormessages").append($('<li/>').text(msg));
                       }

                   return false;

               }


          });

    });

}


function ValidationError(label, error_msg, ok_callback)
{
    this.label = label;
    this.error_msg = error_msg;
    this.ok_callback = ok_callback;
}

2)HTML代码(不是最好的,所有类都用于使样式更好......)

<form action="index.php?page=contact&amp;action=confirm" method="post" enctype="multipart/form-data" id="contactform">

            {if !empty($errorArr)}
                <ul class="errormessages contact">
                    {foreach $errorArr as $error}
                    <li>{$error}</li>
                    {/foreach}
                </ul>
            {/if}


            <div class="formulier">

                <div class="formblock">
                    <div class="label">
                        <label for="naam">Voornaam:</label>
                    </div>
                    <input type="text" name="naam" id="naam" autocomplete="true" value="{if isset($smarty.post.naam)}{$smarty.post.naam}{/if}"/>
                </div>
                </br>
                <div class="formblock">
                    <div class="label">
                        <label for="familienaam">Naam:</label>
                    </div>
                    <input type="text" name="familienaam" id="familienaam" autocomplete="true" value="{if isset($smarty.post.familienaam)}{$smarty.post.familienaam}{/if}"/>

                </div>
                </br>
                <div class="formblock">
                    <div class="label">
                        <label for="email">E-mail:</label>
                    </div>
                    <input type="text" name="email" id="email" autocomplete="true" value="{if isset($smarty.post.email)}{$smarty.post.email}{/if}"/>

                </div>
                </br>
                <div class="formblock">
                    <div class="label">
                        <label for="bericht">Bericht:</label>
                    </div>
                    <textarea rows="10" cols="50" name="bericht" id="bericht">{if isset($smarty.post.bericht)}{$smarty.post.bericht}{/if}</textarea>

                </div>
                </br>
                <div class="formblock">

                    <input type="submit" value="stuur bericht" name="validateMail" id="validateMail"/>

                </div>

            </div>


        </form>

我在网上搜索了很多,但我找不到解决这个问题的方法,所以如果您有任何提示/解决方案,我们将非常感谢!

0 个答案:

没有答案