jQuery - validate form

Question

I tried this code but it still submit the form even the input has not been validated yet.

Here is the code for my form:

<a style="cursor: pointer;" id="upload_image">Upload Image</a></li>

<?php
 $attributes = array('id' => 'upload_form'); 
 echo form_open_multipart('c=web_page&m=upload_img', $attributes); 
?>

<input type='file' style="display:none;" name="photosubmit" id="photosubmit"/>
<?php echo form_cose(); ?>

Here is the code for my jQuery:

$("#upload_image").click(function(){
 $("#photosubmit").click();
  if( $('photosubmit').val() != "") //
   $("#upload_form").submit();
});

so here is my question:

How will I ensure that before I submit this form, my input has already a value..?

'upload_form'); echo form_open_multipart('c=web_page&m=upload_img', $attributes); ?> — Zhul, Oct 01 '13 at 16:48
that one is the form element, I use codeigniter as my web app framework. — Zhul, Oct 01 '13 at 16:48
Your form, however you render it, needs a `onsubmit="return false;"`. See: http://stackoverflow.com/questions/8664486/javascript-to-stop-form-submission — jsmorph, Oct 01 '13 at 17:01
but once i set it to return false, it won't submit the form. — Zhul, Oct 01 '13 at 17:12
Zhul, look at the updated solution. I am sure, it will work now. — Christian Heinrichs, Oct 01 '13 at 18:53

Christian Heinrichs · Answer 1 · 2021-03-03T20:28:56.290

3

If you want to get the element by id you should do this:

if( $('#photosubmit').val() != "")

instead of:

if( $('photosubmit').val() != "")

Updated answer:
With help of the jQuery API documentation, I found a fully working solution:

$("#the_form").submit(function(event) {
  if ( $( "input:first" ).val() !== "" ) {
    alert("The file input is valid.");
    return;
  }
  alert("The file input is not valid.")
  event.preventDefault();
});

https://jsfiddle.net/christianheinrichs/nbuzoxLv/2/

edited Mar 03 '21 at 20:28

answered Oct 01 '13 at 16:42

Christian Heinrichs

786
1
9
28

What does the console say? – Christian Heinrichs Oct 01 '13 at 16:46
nothing, it just submit the form, without ensuring that the input has must a value first. – Zhul Oct 01 '13 at 16:49
The problem may be somewhere else: Check [this](http://jsfiddle.net/q2Jpg/) jsFiddle out. It submits the form, no matter if a file was selected or not. I am still trying to figure this out. – Christian Heinrichs Oct 01 '13 at 16:51
It's in my answer. Click the jsFiddle link. – Christian Heinrichs Oct 01 '13 at 17:41
i don't get it man, still not working. there's nothing happen in my browser. do we really need to have submit button to submit this form? – Zhul Oct 01 '13 at 18:02
I think yes. You will need a submit button. It should work only when you click on it and don't select anything. Kinda buggy. But I hope there is some solution I can find. – Christian Heinrichs Oct 01 '13 at 18:03
I am trying something with event.preventDefault. Still a bit a tricky in this case. – Christian Heinrichs Oct 01 '13 at 18:08
yeah, i hope so.. if this the only solution i have.. i think i have to put a submit button in my page. – Zhul Oct 01 '13 at 18:09
I really don't know. I tried every possible approach, but it does not check the file input field initially. Only after clicking on it and not giving a file to it. – Christian Heinrichs Oct 01 '13 at 18:22
yeah that's right, i'm also trying to figure it out, but it always give me the same results... – Zhul Oct 01 '13 at 18:28
i think the file input has already a value before it is clicke – Zhul Oct 01 '13 at 18:36

Tushar Gupta - curioustushar · Answer 2 · 2013-10-01T16:48:48.797

0

Try

$("#upload_image").click(function (e) {
    e.preventDefault();
    if ($("#photosubmit").val() != "") 
           ^ //added # here
    $("#upload_form").submit();
});

References

event.preventDefault

edited Oct 01 '13 at 16:48

answered Oct 01 '13 at 16:43

Tushar Gupta - curioustushar

58,085
24
103
107

still not working man, aside from .val() function, is there any other method that i can use to ensure that my input file has been set? – Zhul Oct 01 '13 at 16:55
i think the file input has already a value before it is clicked. – Zhul Oct 01 '13 at 18:36

score 0 · Answer 3 · answered Oct 01 '13 at 16:55

0

Check what is returned:

$("#photosubmit").val()

If returns null that is different from empty string.

Try this:

if ($("#photosubmit").val()) {
    $("#upload_form").submit();
}

answered Oct 01 '13 at 16:55

maketest

281
1
8

still not working, it still submit the form even the file was selected or not – Zhul Oct 01 '13 at 17:30

score 0 · Answer 4 · answered Oct 01 '13 at 17:00

You are missing an # in your code, it has to be:

$("#upload_image").click(function(){
 $("#photosubmit").click();
  if( $('#photosubmit').val() != "")
   $("#upload_form").submit();
});

Also, is the #upload_image click event, the right event to check if your input[type="file"] is filled?

score 0 · Accepted Answer · answered Oct 02 '13 at 14:30

After one day of research, I tried this one and it works. It will only submit the form once you have made any changes to the file input type form(e.g you want to upload new file).

$("#upload_image").click(function () {
  $("#photosubmit").click().change(function(){
    $("#upload_form").submit();
  });
});

I hope it will help someone in the future.

jQuery - validate form

5 Answers5