FORM won't submit even though input fields are not empty

Question

it wont submit even though the fields are not empty

here's the form:

<form id="form" role="form" method='POST' action="user_add-post.php">
     <div class="form-group">
        <p><label class="control-label">Title</label><br />
            <input style="width: 40%" class="form-control" type="text" name="postTitle"/>
     </div>
     <div class="form-group">
        <p><label lass="control-label">Description</label><br />
           <textarea name="postDesc" cols="60" rows="10"></textarea>
     </div>
     <div class="form-group">
        <p><label>Content</label></p>
           <textarea name="postCont" cols="60" rows="10"></textarea>
     </div>
     <input type='submit' name="submit" class='btn btn-primary' value='Submit'></form>

and here's my jquery to check if the input fields are empty:

$('#form').submit(function() {
if ($.trim($("#postTitle").val()) === "" || $.trim($("#postDesc").val()) === "" || $.trim($("#postCont").val()) === "") {
    alert('All fields required');
    return false;
}  });

now why won't it submit? it keeps on saying that all fields are required even though I already fill up the fields.

Answer 1

You have missed to add id in input boxes,

<input style="width: 40%" class="form-control" type="text" name="postTitle"/> 

Change it to

<input style="width: 40%" class="form-control" type="text" id="postTitle" name="postTitle"/>

for next text box aswell ,Please Refer

Answer 2

您尚未将id赋予任何表单字段，请使用带条件的全局选择器，这是您任务的工作提琴

`$("input[name=postTitle]").val()` //name selector instead of id

Answer 3

您没有定义ID，因此将条件更改为

if ($.trim($('[name="postTitle"]').val()) === "" || $.trim($('[name="postDesc"]').val()) === "" || $.trim($('[name="postCont"]').val()) === "") 

Answer 4

如果条件应该是这样的：

if ($("#postTitle").val().trim() == "" || $("#postDesc").val().trim() == "" || $("#postCont").val().trim() == "") {

Answer 5

See for any JS errors if you are getting. Also , try it on various browsers. You are not using ID attribute, but Name attritute, so it may not work on Firefox,Chrome and may work on IE7 and below. Hope this helps you

Answer 6

Provide Id to input element in html code.

Jquery code is fine

here is the correct code of html

<input style="width: 40%" class="form-control" type="text" name="postTitle" id="postTitle"/>

Answer 7

Yes like everyone else is saying if you are going to use selectors then you need those id's on the form fields. Or you can use the names like this:

$("[name=postTitle]").val()
$("[name=postDesc]").val()
$("[name=postCont]").val()

Here is your jquery with the above:

$('#form').submit(function() {
if ($("[name=postTitle]").val().trim() == "" || $("[name=postDesc]").val().trim() == "" || $("[name=postCont]").val().trim() == "") {
    alert('All fields required');
    return false;
}  });

Answer 8

As others have said, the selectors are based on ID but using name attribute values. So you can add ID attributes, change the selector or use a different strategy.

Since the listener is on the form, this within the function references the form and all form controls with a name are available as named properties of the form. So you can easily test the value contains something other than whitespace with a regular expression, so consider:

var form = this;
var re = /^\s*$/;

if (re.test(form.postTitle.value) || re.test(form.postDesc.value) || re.test(form.postCont.value) {

  /* form is not valid */

}

which is a lot more efficient than the OP.

Given the above, a form control with a name of submit will mask the form's submit method so you can't call form.submit() or $('#formID').submit() .