进行html验证，而无需在提交表单时调用javascript函数。

Question

I have a form which has a textarea:

<form id="hello">
  <textarea id="Testarea" required></textarea>
</form>
<button id="myButton" type="submit" value="Submit">Click me!
</button>

When the user submits the form, I listen to it via a jquery handler:

$("#myButton").click(function () {
    alert("blah");
});

However if the textarea is empty, I want an error to be thrown without calling my function. Right now, my function is called even if the textarea is empty. https://jsfiddle.net/8dtsfqp0/

Answer 1

Use a submit handler on the form, not a click handler on the button.

Here is the order of execution when you click on a submit button:

• Button's click handler is called. If it calls event.preventDefault() , the process stops.
• The form is submitted, which performs the following steps:
  • Validate input fields. If any validation fails, the process stops.
  • Call the form's submit handler. If it calls event.preventDefault() , the process stops.
  • The form data is sent to the server.

So if you want to prevent your function from being called, it has to be after the "Validate input fields" step. So change your code to:

$("#hello").submit(function () {
    //Throw error if textarea is empty
  alert("Her");
});

Fiddle

Answer 2

you can try this:

$("#myButton").click(function () {
if($('#Testarea').val().trim().length > 0)
{
return true;
}
else
{
alert("empty text box");
return false;
}

});

Answer 3

<script type="text/javascript">
document.getElementById("myButton").addEventListener("click", myFunction);
var problem_desc = document.getElementById("Testarea");
function myFunction() {
    if (problem_desc.value == '') {
        alert("blank");
        return false;
    }
    else{
    alert("working");
    }
}
</script>