locked
Stop Ajax button click if html5 validation error occurs RRS feed

  • Question

  • User940894612 posted

    Hi,

    I have a little contact form on my site which calls an ajax method in the code-behind:

    <div class="main-body-right">
                            <input type="text" placeholder="Name" id="txtName" clientidmode="Static" runat="server" required="">
                            <input type="email" placeholder="Email" id="txtEmail" clientidmode="Static" runat="server" required="">
                            <textarea placeholder="Message..." id="txtMessage" runat="server" required=""></textarea>
                            <input type="submit" id="btnSubmit" value="Submit" onclick="myFunction()" >
                            <ul class="errorMessages"></ul>
                            <div id="MessageSent" class="alert alert-success" style="display: none" role="alert">
                                Thank you for your enquiry, we will respond to you ASAP.
                            </div>
                            <div id="MessageUnsent" class="alert alert-warning" style="display: none" role="alert">
                                Oops, something went wrong.  Please email us at <a href="mailto:bo@baafrozenmeatenterprise.com">bo@baafrozenmeatenterprise.com</a>
                            </div>
                        </div>
    <script>
            $(document).ready(function() {
                $('#btnSubmit').click(function () {
                    $.ajax({
                        type: "post",
                        url: "Home.aspx/SendEmail",
                        data: "{ 'name': '" + $("#<%=txtName.ClientID%>").val() + "', 'message': '" + $("#<%=txtMessage.ClientID%>").val() + "', 'email': '" + $("#<%=txtEmail.ClientID%>").val() + "' }",
                        contentType: "application/json; charset=utf-8",
                        datatype: "json",
                        success: function (data) {
                            if (data.d === true) {
                                //alert("Hello");
                                $("#MessageSent").show(200);
                                $("#MessageUnsent").hide(200);
                            } else {
                                $("#MessageUnsent").show(200);
                                $("#MessageEent").hide(200);
                            }
                            //$('#Content').html(JSON.stringify(data));
                        },
                        Error: function(error) {
                            console.log("error");
                        }
                    });
                });
            });
    <script>

    The call works fine.  However, if a user does not enter any details and hits submit - the form is still firing.  Anyone know how I can stop this? 

    Thanks in advance.

    Rob

    Friday, January 12, 2018 7:53 AM

Answers

  • User-474980206 posted

    if you change the button to a submit, the browser will submit the form when clicked. you don't want this so you cancel the submit:

    $(function() {
        $('#btnSubmit')
           .closest('form')
           .submit(function(e){
               event.preventDefault();
               $.ajax({....})
           });
    ));   
    
    

    • Marked as answer by Anonymous Thursday, October 7, 2021 12:00 AM
    Saturday, January 13, 2018 8:02 PM

All replies

  • User-474980206 posted

    if your using html 5 validation, then you just use the on submit rather than on click event. be sure to cancel the the submit, because your are using ajax to do the submit

    Friday, January 12, 2018 4:28 PM
  • User940894612 posted

    Hi Bruce

    Thank you for your response.  What do you mean by "be sure to cancel the the submit, because your are using ajax to do the submit".

    Can you provide the code sample please? 

    Thanks

    Rob

    Friday, January 12, 2018 11:02 PM
  • User-474980206 posted

    if you change the button to a submit, the browser will submit the form when clicked. you don't want this so you cancel the submit:

    $(function() {
        $('#btnSubmit')
           .closest('form')
           .submit(function(e){
               event.preventDefault();
               $.ajax({....})
           });
    ));   
    
    

    • Marked as answer by Anonymous Thursday, October 7, 2021 12:00 AM
    Saturday, January 13, 2018 8:02 PM
  • User940894612 posted

    Thank you Bruce.  

    Sunday, January 14, 2018 6:51 PM