CODEWITHSUNDEEP
javascripthtml
user3853587
user3853587

Reputation:

how to block form submit button

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?

Upvotes: 1

Views: 886

Answers (3)

1111161171159459134
1111161171159459134

Reputation: 1215

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.

Upvotes: 0

PaulDapolito
PaulDapolito

Reputation: 824

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.

Upvotes: 1

Matyas
Matyas

Reputation: 13712

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');
   }
});

Upvotes: 3

Related Questions