当前位置: 动力学知识库 > 问答 > 编程问答 >

jQuery: prevent form submission if the field before submit button is empty

问题描述:

I've just started learning jQuery and already love it, but my skills aren't enough yet to solve this probably simple problem for my work: I have 3 different forms with an input field immediately followed by submit button:

I would like to prevent form submission if the text input field or the textarea before the submit button is empty. I've stolen a snippet from the jQuery Ninja book:

$(function() {

$(':submit').click(function(e) {

$(':text').each(function() {

if ($(this).val().length == 0) {

$(this).css('border', '2px solid red');

}

});

e.preventDefault();

});

});

But it has following problems:

  1. It ignores the textarea in the last form, because $(':text').each() does not apply to it
  2. It doesn't allow submitting any form - I guess I need to move preventDefault() under an "if"
  3. I probably should better use prev() instead of each()
  4. If the user changes her mind and clicks another form, the previous form should be cleared

Could someone help me please? Alex

UPDATE:

I've tried:

$(function() {

$(':submit').click(function(e) {

$(this).prev(function() {

if ($(this).val().length < 2) {

// would be good to clear border for

// each text and textarea here...

$(this).css('border', '2px solid red');

e.preventDefault();

}

});

});

});

but unfortunately get 2 warnings:

Warning: Unexpected token in attribute selector: '!'.

Warning: Unknown pseudo-class or pseudo-element 'submit'.

and the red border doesn't appear and the form is submitted when a button is clicked.

Also I've tried:

$(function() {

$('form').submit(function(e) {

$(':text, textarea').each(function() {

if ($(this).val().length < 2) {

$(this).css('border', '2px solid red');

e.preventDefault();

}

});

});

});

but the form is never submitted and all 3 text fields turn red instead of just one.

网友答案:
<script type="text/javascript" src="/jquery-1.4.4.min.js"></script>
<script type="text/javascript">
$(function() { 
        $(':submit').click(function(e) {
                $(':text, textarea').each(function() {
                        if ($(this).val().length == 0) {
                                $(this).css('border', '2px solid red');
                                e.preventDefault();
                        }
                });
        });
});
</script>

You'll probably be ok with .each() :)

网友答案:

Code for click and enter the submit button

 $(":input").bind("click keypress", function (evt) {

     var keyCode = evt.which || evt.keyCode;
     var sender = evt.target;
     if (keyCode == 13 || sender.type == "submit") {
         evt.preventDefault();

         //add your validations here
     }

and submit the form.

网友答案:
  1. Because (':text') is equivalent to $('[type=text]') so it doesn't include textarea. Change to $(':text, textarea').
  2. Correct
  3. No, prev doesn't loop over the collection, each does. (prev selects the previous sibling of the current element)

  4. Have a look a http://bassistance.de/jquery-plugins/jquery-plugin-validation/ , it is a great validation plugin.

分享给朋友:
您可能感兴趣的文章:
随机阅读: