Question

我试图在原型框架上提交表单之前使用jquery validatoin，之后仍然无法完成它。我有以下代码。

<script>
jQuery(function (jQuery) {
jQuery('#edit_form').submit(function () {

    var valid = true;
    var errormsg = 'required!';
    var errorcn = 'error';

    jQuery('.' + errorcn, this).remove();

    jQuery('.required-entry', this).each(function () {
        var parent = jQuery(this).parent();
        if (jQuery(this).val() == '') {
            var msg = jQuery(this).attr('title');
            msg = (msg != '') ? msg : errormsg;
            jQuery('<span class="' + errorcn + '">' + msg + '</span>')
                .appendTo(parent)
                .fadeIn('fast')
                .click(function () {
                jQuery(this).remove();
            })
            valid = false;
        };
    });

        return valid;
    });
})
</script>
            <table id="testform">
            <tr>
            <td style="text-align:left; padding-left:10px;font-family:segoeui"><input id="Desc2" name="Desc2" value="" class="required-entry input-text" type="text"title="Required" /></td>
            <td class="mono" style="width:15%;"><input name="qta2" value="" class="qta required-entry input-text" type="text" title="Required" /></td>
            <td style="width:15%;" class="mono"><input name="bpa2" value="" class="bpa required-entry input-text" type="text" title="Required" /></td>
        </tr>

        <tr>
            <td style="text-align:left; padding-left:10px;font-family:segoeui"><input id="Desc3" name="Desc3" value="" class="required-entry input-text" type="text"title="Required" /></td>
            <td class="mono" style="width:15%;"><input id="qta3" name="qta3" value="" class="qta required-entry input-text" type="text" title="Required" /></td>
            <td style="width:15%;" class="mono"><input id="bpa3" name="bpa3" value="" class="bpa required-entry input-text" type="text" title="Required" /></td>
        </tr>

        <tr>
            <td style="text-align:left; padding-left:10px;font-family:segoeui"><input id="Desc4" name="Desc4" value="" class="required-entry input-text" type="text"title="Required" /></td>
            <td class="mono" style="width:15%;"><input id="qta4" name="qta4" value="" class="qta required-entry input-text" type="text" title="Required" /></td>
            <td style="width:15%;" class="mono"><input id="bpa4" name="bpa4" value="" class="bpa required-entry input-text" type="text" title="Required" /></td>
        </tr>
        </table>
                        <div class="submit content-header">
                           <h3 class="icon-head head-products">Page Title</h3>
                           <p class="content-buttons form-buttons">
                                <button id="id_be" type="button" class="add" onclick="document.edit_form.submit();" style=""><span>Submit</span></button>       
                            </p>
                        </div>

                        <form action="test.php?IID=1" method="post" id="edit_form" name="edit_form" enctype="multipart/form-data">
                            <input type="hidden" id="editform" name="editform" value="1" >
                            <div style="display:none"></div>
                        </form>

jsfiddle here http://jsfiddle.net/sammry/qBHLB/

只需验证必填字段即可处理表单。请帮助!!!

Answer 1

尝试使用preventDefault（）函数：

$('#edit_form').submit(function (event) {
    event.preventDefault();

    //rest of your code
}

PS：你可以用$而不是jQuery来写简写。

如果这不起作用，请尝试将ID设置为提交按钮并将事件更改为

$("#submitButtonID").click(function(event){
     event.preventDefault();

     //Validation

     if(valid){
         $("#edit_form").submit();
     }
}

编辑：整个代码段

<script>
jQuery(function (jQuery) {
jQuery('#id_be').click(function (event) {
    event.preventDefault();

    var valid = true;
    var errormsg = 'Please fill in all required fields!';

    jQuery('.errormessages').html('');

    jQuery.each(jQuery('input'), function () {
        var parent = jQuery(this).parent();
        if (jQuery(this).attr('title') == 'Required' && jQuery(this).val() == '') {

            jQuery(this).attr('background-color', '#FF0000');
            // This will colour the background of the required input field red to make it more obvious to the user.

            valid = false;
        };
    });

    if(valid){
        jQuery('#edit_form').submit();
    }else{
        jQuery('.errormessages').html('<p>' + errormsg + '</p>');
    };

});
})
</script>

       <form action="test.php?IID=1" method="post" id="edit_form" name="edit_form" enctype="multipart/form-data">
            <div class='errormessages'></div>
            <table id="testform">
            <tr>
            <td style="text-align:left; padding-left:10px;font-family:segoeui"><input id="Desc2" name="Desc2" value="" class="required-entry input-text" type="text"title="Required" /></td>
            <td class="mono" style="width:15%;"><input name="qta2" value="" class="qta required-entry input-text" type="text" title="Required" /></td>
            <td style="width:15%;" class="mono"><input name="bpa2" value="" class="bpa required-entry input-text" type="text" title="Required" /></td>
        </tr>

        <tr>
            <td style="text-align:left; padding-left:10px;font-family:segoeui"><input id="Desc3" name="Desc3" value="" class="required-entry input-text" type="text"title="Required" /></td>
            <td class="mono" style="width:15%;"><input id="qta3" name="qta3" value="" class="qta required-entry input-text" type="text" title="Required" /></td>
            <td style="width:15%;" class="mono"><input id="bpa3" name="bpa3" value="" class="bpa required-entry input-text" type="text" title="Required" /></td>
        </tr>

        <tr>
            <td style="text-align:left; padding-left:10px;font-family:segoeui"><input id="Desc4" name="Desc4" value="" class="required-entry input-text" type="text"title="Required" /></td>
            <td class="mono" style="width:15%;"><input id="qta4" name="qta4" value="" class="qta required-entry input-text" type="text" title="Required" /></td>
            <td style="width:15%;" class="mono"><input id="bpa4" name="bpa4" value="" class="bpa required-entry input-text" type="text" title="Required" /></td>
        </tr>
        </table>
                        <div class="submit content-header">
                           <h3 class="icon-head head-products">Page Title</h3>
                           <p class="content-buttons form-buttons">
                                <button id="id_be" type="button" class="add" style=""><span>Submit</span></button>       
                            </p>
                        </div>

                            <input type="hidden" id="editform" name="editform" value="1" >
                            <div style="display:none"></div>
                        </form>

Onclick提交事件，防止在Prototype Framework上进行Jquery验证

1 个答案: