I am trying to create form by putting form requirement and it's not working

Question

I have an in input required. As I am using input type="submit" it is working fine but I am using input type button. When I used input type button the input requirement doesn't work. Please help

When I used the code below with type submit the required is working

<script>
function validateForm() {
  var x = document.forms["myForm"]["fname"].value;
  if (x == "") {
    alert("Name must be filled out");
    return false;
  }
}
</script>

<form name="add_name" id="add_name">
  Name: <input type="text" name="fname" required>
  <input type="submit" value="Submit">
</form>

But my form is as below. I am using input type button and the requirement is not working. How to solve it please.

<form name="add_name" id="add_name">
Name: <input type="text" name="fname" required>
<input type="button" value="Submit">
</form>

_"When I used input type button the input requirement doesn't work"_ - So why don't you show us that code? When posting a question, you should show us the code that _doesn't_ work together with a proper explanation of "doesn't work" mean in this context and explain what debugging you've done. — M. Eriksson, Nov 28 '20 at 09:46
@MagnusEriksson I've edited my question. Hope you understand clearly now — JohnRaaj Seager, Nov 28 '20 at 10:12
Did you read the answers on the link I posted? And where are you actually calling the validateForm()-function? — M. Eriksson, Nov 28 '20 at 10:15

score -2 · Answer 1 · answered Nov 28 '20 at 09:53

-2

what`s up?

You just need add even listener on your button (not form), because form tag react onSubmit, but doesn`t react onClick buttons inside (like yours).

There is your right code:

<form name="myForm" action="/action_page.php" method="post">
  Name: <input type="text" name="fname">
  <input type="submit" value="Submit" onclick="return validateForm()">
</form>

answered Nov 28 '20 at 09:53

Danil Safonov

15
2

```
Name:
``` Actually my form is like this – JohnRaaj Seager Nov 28 '20 at 10:11
okey, that`s not problem, just put "onclick="return validateForm()"" into your submit input, like this: "", and if you changed your form id, change that into your function too) – Danil Safonov Nov 28 '20 at 10:14
The validation should be on the form (onSubmit event) instead of the button. Right now, if you hit enter while the "fname" input is in focus, the form will be submitted without any validation (since the button won't get a click-event) – M. Eriksson Nov 28 '20 at 10:14
@magnusEriksson Yeah, that right way to that) – Danil Safonov Nov 28 '20 at 10:16
2

If you agree with me, why did you write an answer that doesn't do it the right way? – M. Eriksson Nov 28 '20 at 10:17
@MagnusEriksson because the question is in problem to change submit on button) – Danil Safonov Nov 28 '20 at 10:19
2

So tell them the difference and give a proper suggestion. Knowingly writing a sub-optimal answer without explaining the side effects isn't particularly helpful (since they most likely just end up back here asking about those) – M. Eriksson Nov 28 '20 at 10:23
Thank You so much. My problem has been solved. @MagnusEriksson – JohnRaaj Seager Nov 28 '20 at 12:06

I am trying to create form by putting form requirement and it's not working

1 Answers1