why can't I submit an empty textbox to the server-CodePudding

when I click the 'save new post' button and the title and body content are provided then the action of sending a request is successfull, but if I leave one field blank, than the request isn't even made. this is my code:

<form action="/create-post" method="POST">
  <div >
    <label for="post-title" ><small>Title</small></label>
    <input required name="title" id="post-title"  type="text" placeholder="" autocomplete="off">
  </div>

  <div >
    <label for="post-body" ><small>Body Content</small></label>
    <textarea required name="body" id="post-body"  type="text"></textarea>
  </div>
  
  <button >Save New Post</button>
</form>

And this is what I get when I leave a field blank: form behavor after submitting empty field

in the image, 'Compila questo campo' just means 'Fill in this field'

Edit: thank you for reminding me that it’s because of the required field, but then why is that in this example i can't submit if the title field is empty but can if the body is empty?

<form  action="/post/<%= post._id %>/edit" method="POST">
<div >
  <label for="post-title" ><small>Title</small></label>
  <input required name="title" value="<%= post.title %>" id="post-title"  type="text" placeholder="" autocomplete="off">
</div>

<div >
  <label for="post-body" ><small>Body Content</small></label>
  <textarea required name="body" id="post-body"  type="text"><%= post.body %>
  </textarea>
</div>

<button >Save Changes</button>

Note that this is a ejs template, so that's why it as <% and <%=

CodePudding user response：

You have required attribute both of your inputs. So you can't submit this form in this way.

See here for details

For example in this example you can submit the form:

<!DOCTYPE html>
<html>
<body>

<h1>The button type attribute</h1>

<form action="#" method="get">
  <label for="fname">First name:</label>
  <input type="text" id="fname" name="fname"><br><br>
  <label for="lname">Last name:</label>
  <input type="text" id="lname" name="lname"><br><br>
  <button type="submit" value="Submit">Submit</button>
  <button type="reset" value="Reset">Reset</button>
</form>

</body>
</html>

But in this example you can't:

<!DOCTYPE html>
<html>
<body>

<h1>The button type attribute</h1>

<form action="/action_page.php" method="get">
  <label for="fname">First name:</label>
  <input type="text" id="fname" name="fname" required><br><br>
  <label for="lname">Last name:</label>
  <input type="text" id="lname" name="lname" required><br><br>
  <button type="submit" value="Submit">Submit</button>
  <button type="reset" value="Reset">Reset</button>
</form>

</body>
</html>

Good luck.

CodePudding user response：

You explicitly said that the user was required to fill in a value.

Don't do that if the field is optional.

CodePudding user response：

Because your <input> and <textarea> tags have required attribute. Remove that attribute if you want to make them optional.

CodePudding user response：

You are using required attribute with textbox and text area.

The required attribute is a boolean attribute.

When present, it specifies that an input field must be filled out before submitting the form.

This is client side (browser side validation).

Reference