how to block form submit button

Question

I'm working on my html source to get the user to input their email in the textbox and click on the submit button to enter the site.

When a user did not put their email in the textbox, he can click on the submit button to enter to the site. I want to block it to stop them from entering the site.

Here is the code I use:

<div id="MainContent">
  <div id="content"></div>
  <div id="form">
  <div id="WFItem5736404" class="wf-formTpl">
    <form accept-charset="utf-8" action="https://app.getresponse.com/add_contact_webform.html?u=KLlP" method="post">
            <div id="WFIcenter" class="wf-body">
                        <div class="wf-contbox">
                            <div class="wf-inputpos">
                                <input name="email" class="Email" style="position: absolute; left: 4%; bottom: 110px; width: 90%; height: 51px;" type="text" data-placeholder="yes" placeholder="Enter your Email Address...">
                            </div>
                        </div>
                        <div class="wf-contbox">
                            <div class="wf-inputpos">
                                <input name="submit" class="button" style="position: absolute; left: 4%; bottom: 46px; width: 92.5%; height: 56px;" type="image" src="button.png">
                        </div>
            </div>
        </div>

        <input type="hidden" name="webform_id" value="5736404" />
    </form>
</div>
<script type="text/javascript" src="http://app.getresponse.com/view_webform.js?wid=5736404&mg_param1=1&u=KLlP"></script>
</div>
</div>
<script type="text/javascript">
var sprytextfield1 = new Spry.Widget.ValidationTextField("sprytextfield1", "email");
</script>

I want to add the tooltip under the email textbox to force the user to input their email address before they can click on the submit to enter the site.

Can you please tell me how I can block the submit button from enter the site when the textbox is empty so I can add the tooltip under the textbox to force the user to input their email?

possible duplicate of [Can't validate required fields in my form](http://stackoverflow.com/questions/25303265/cant-validate-required-fields-in-my-form) — GuyT, Aug 16 '14 at 17:07

Matyas · Answer 1 · 2014-08-16T17:17:22.930

3

You can listen to the submit event and prevent its default (submit) behavior with event.preventDefault()

Demo fiddle

Javascript (pure)

var form = document.getElementById('yourFormId');
form.onsubmit = function (ev) {
   if (!inputDataIsValid()) {
      ev.preventDefault();
      alert('invalid input data');
   }
};

Note: If you use jQuery you can do the same by:

$('.form-selector').on('submit', function (ev) {
   if (!inputDataIsValid()) {
      ev.preventDefault();
      alert('invalid input data');
   }
});

edited Aug 16 '14 at 17:17

answered Aug 16 '14 at 17:08

Matyas

13,473
3
60
73

If IE8 or below support is not needed, [`form.addEventListener()`](http://jsfiddle.net/1auajg2k/2/) is a better option. – Jared Farrish Aug 16 '14 at 17:28
@Matyas thank you very much for this, but i have a problem. how i can use the javascript to work with my current code? – Aug 16 '14 at 17:28

PaulDapolito · Accepted Answer · 2014-08-16T17:32:59.690

1

Add the required attribute to the input element like such:

<input required name="email" class="Email" style="position: absolute; left: 4%; bottom: 110px; width: 90%; height: 51px;" type="text" data-placeholder="yes" placeholder="Enter your Email Address...">

This blocks form submission until the input is filled-in by the user, and displays a tooltip if the user attempts to submit the form without completing the field. Here's an elucidating example of the required attribute from W3Schools and a nice explanation of the attribute from MDN.

edited Aug 16 '14 at 17:32

answered Aug 16 '14 at 17:04

PaulDapolito

824
6
12

That's very interesting but w3schools claims it doesn't work in Safari, IE9 or IE8 – yitwail Aug 16 '14 at 17:11
It is supported in IE10, though. – PaulDapolito Aug 16 '14 at 17:13
I'm aware w3schools isn't an authority, but I imagine they're right quite often. In this case, 'required' being an HTML5 attribute, it's not surprising older versions of IE don't implement it – yitwail Aug 16 '14 at 17:24
You're better off on SO citing the W3 specification or MDN. For instance, MDN [explains it nicely](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/Input#attr-required) and there's a browser compatibility chart included at the bottom. – Jared Farrish Aug 16 '14 at 17:31
Point taken, although W3Schools does provide an example in this case. I've added the MDN link to my answer. – PaulDapolito Aug 16 '14 at 17:32
@PaulD thank you very much for your help. I can see the tooltip go under the textbox with a text "please fill out this field". Is it possible to change it? – Aug 16 '14 at 17:39
You are very welcome. Yes, it is possible. See http://stackoverflow.com/questions/5272433/html5-form-required-attribute-set-custom-validation-message – PaulDapolito Aug 16 '14 at 17:49

score 0 · Answer 3 · answered Aug 16 '14 at 18:16

You could try to add required pattern="[^ @]+@[^ @]+.[a-z]+" at the end of your input[name=email] tag, like so:

<input name="email" class="Email" style="position: absolute; left: 4%; bottom: 110px; width: 90%; height: 51px;" type="text" data-placeholder="yes" placeholder="Enter your Email Address..." required pattern="[^ @]+@[^ @]+.[a-z]+" />

This goes beyond simply check for something is entered.
This would also check for email syntax validity.

how to block form submit button

3 Answers3

Javascript (pure)