CODEWITHSUNDEEP
jquery
zhuanzhou
zhuanzhou

Reputation: 2443

why the prevent form submit code doesn't work?

$(document).ready(function(){ 
    if($("#field-huima-0-value").val()=='' && $(".link-field .form-text").val() =='')
    $("#edit-submit").click(function(){
       alert("you must at least enter one value！"); 
    });
});

field-huima-0-value and .link-field .form-text are two input text boxes id and class.

when the two input text boxes is null. i click the submit button. the alert box shows, then i click ok. the form still be submitted. but now,i want to prevent the form from submitting. so i add the return false; under the alert line. it can prevent the form submitting.but when i type a value into one input boxes of the them, when click the button. it still shows the alert box.

Upvotes: 0

Views: 151

Answers (4)

Mohammed Swillam
Mohammed Swillam

Reputation: 9242

I think you code needs some modifications, kindly check this out:

$(document).ready(function() { 
  $("#edit-submit").click(function() {
     if(!$("#field-huima-0-value").val() && !$(".link-field .form-text").val()) {
         alert("you must at least enter one value！"); 
         return false;
     }
     return true;
  });    
});

this code will attach the check function to the click event of your submit button, and only returns false if the check didn't succeed.

Update: I've updated the above code ans tested it, and now working fine, also I've made you a sample to test this code, kindly follow this link: http://jsfiddle.net/6egtW/1/

let me know what happened.

Upvotes: 2

korywka
korywka

Reputation: 7653

  1. Check values on click
  2. return false on click if dont want submit
  3. you can use .submit() to submit form

Upvotes: 1

James Allardice
James Allardice

Reputation: 165971

$(document).ready(function() { 
    $("#edit-submit").click(function() {
        if($("#field-huima-0-value").val()=='' || $(".link-field .form-text").val() =='') {
           alert("you must at least enter one value！"); 
        });
    }
});

Try that - you need to run the code in the click event, your if statement wasn't containing the code I think you meant it to, and was testing to see if both fields were empty, not if either field was empty.

Upvotes: 0

Guffa
Guffa

Reputation: 700312

The problem is that you are checking the values when the page loads, not when you click the button.

Check the values in the click event instead:

$(document).ready(function(){ 

  $("#edit-submit").click(function(){
    if($("#field-huima-0-value").val() == '' && $(".link-field .form-text").val() =='') {
      alert("you must at least enter one value！");
      return false;
    }
  });

});

Note: If you require both fields to be filled in, you should use the || operator instead of && in the condition.

Also consider to do the validation using the submit event. The difference is that when you do the check on the click event you will only validate the form if it's the button that is used to post the form. If there is another way of posting the form (using the enter key for example), the validation will not happen.

Upvotes: 3

Related Questions