CODEWITHSUNDEEP
javascriptjqueryhtmlforms
user3172050
user3172050

Reputation: 839

How can I make something not happen when a "submit" button is clicked

I'm constructing a form that is supposed to do two things:

  1. If an email is entered, submit the data via hidden iframe to Mailchimp, then open up a modal that is included in the code.

  2. If there is an incorrect value or no value in the form, then it is supposed to show an error in the field like "Please enter your e-mail" or "Invalid e-mail".

Issues with this:

I am using the http://jqueryvalidation.org/ plugin, so that's where my JS is based off of.

HTML:

<form action="http://Verseux.us3.list-manage2.com/subscribe/post" id="myform1" class="myform1" method="POST" name="form" target="hidden-form">

        <!-- edit form styles: rounded corners, seperation between field and label -->
        <div class="row" id="form">
          <div class="small-11 medium-8 large-7 small-centered columns">
            <div class="row collapse">
              <div class="form-field columns">
                <input type="hidden" name="u" value="64f283b6044970e25fc1a2fc7">
                <input type="hidden" name="id" value="3674d50bfa">
                <input type="email" autocapitalize="off" autocorrect="off" name="email" id="MERGE0" placeholder="Get early access to VERSEUX">
              </div>
              <div class="form-button columns">
                <input class="button postfix md-trigger" onclick="validate()" data-modal="modal-16" type="submit" name="submit" value="Sign Up">
                <input class="button postfix1 md-trigger" data-modal="modal-16" type="submit" name="submit" value="Go">
              </div>
            </div>
          </div>
        </div>
      </form>
      <IFRAME style="display:none" name="hidden-form"></IFRAME>  
      <div class="row" id="sub-text">
        <div class="small-10 medium-10 small-centered columns end">
          <h2 id="welcome-2">
            JULY TWENTY-FOURTH
          </h2>
        </div>
      </div>
    </div>

JS:

$(document).ready(function () {

$('#myform').validate({ // initialize the plugin
    rules: {
        email: {
            required: true,
            email: true,
            minlength: 5
        },
    });
    submitHandler: function (form) { // for demo
        alert('valid form submitted'); // for demo
        return false; // for demo
    }
});

Upvotes: 0

Views: 305

Answers (5)

Andrii Litvinov
Andrii Litvinov

Reputation: 13182

Your code in example is not correct. I've fixed it a bit and now it works as you want to:

Removed onclick in html

<form action="localhost" id="myform1" class="myform1" method="POST" name="form" target="hidden-form">
    <!-- edit form styles: rounded corners, seperation between field and label -->
    <div class="row" id="form">
      <div class="small-11 medium-8 large-7 small-centered columns">
        <div class="row collapse">
          <div class="form-field columns">
            <input type="hidden" name="u" value="64f283b6044970e25fc1a2fc7">
            <input type="hidden" name="id" value="3674d50bfa">
            <input type="email" autocapitalize="off" autocorrect="off" name="email" id="MERGE0" placeholder="Get early access to VERSEUX">
          </div>
          <div class="form-button columns">
            <input class="button postfix md-trigger" data-modal="modal-16" type="submit" name="submit" value="Sign Up">
            <input class="button postfix1 md-trigger" data-modal="modal-16" type="submit" name="submit" value="Go">
          </div>
        </div>
      </div>
    </div>
  </form>
  <IFRAME style="display:none" name="hidden-form"></IFRAME>  
  <div class="row" id="sub-text">
    <div class="small-10 medium-10 small-centered columns end">
      <h2 id="welcome-2">
        JULY TWENTY-FOURTH
      </h2>
    </div>
  </div>
</div>

Added message and proper form id in JS:

$(document).ready(function () {
    $('#myform1').validate({ // initialize the plugin
        rules: {
            email: {
                required: true,
                email: true,
                minlength: 5
            },
        },
        submitHandler: function (form) { // for demo
            alert('valid form submitted'); // for demo
            return false; // for demo
        },
        messages:{ email: "please eneter valid email"}
    });
});

Upvotes: 1

AJ.
AJ.

Reputation: 400

HTML5 can validate email field for you

<form>
    <input type="email" id="emailform" placeholder="Enter your email">
    <input type="submit" value="Submit">
</form>

When user submits it shows error.

Also if you want to do it via js. Just get the value of the input element and return false.

if ($('#emailform').val() == ""){
return false;
})

Upvotes: 1

nhaa123
nhaa123

Reputation: 9798

Well, look carefully your code here:

... }); // You are closing the validation method and submitHandler is not part of any object's config?
    submitHandler: function (form) { ...

Upvotes: 0

CDrosos
CDrosos

Reputation: 2528

the onclick event make it with a single button not a submit button and when the form is validated in javascript submit it with something like this:

document.forms["form"].submit();

Upvotes: 0

kstubs
kstubs

Reputation: 808

If submitHandler is handling your form submission, and the form argument is the event object, then you just need to do:

form.stopPropagation();

Karl..

Upvotes: 0

Related Questions