validate form before submit using jquery

Question

I have a jquery which will perfectly working on validation but it sends message if inputs are null . How could I make submit button also to validate if those fileds are empty before it submit.

jQuery

$(document).ready(function () {

    if ($("#your-name-qoute").val('')) {
        $("#your-name-qoute").val('Name Please');
    }
    $('#your-name-qoute').focus(function () {
        if ($('#your-name-qoute').val() == 'Name Please') {
            $('#your-name-qoute').val("");
        }

    });
    $('#your-name-qoute').blur(function () {
        var nameRegex = /^[A-Za-z]+$/;
        var fname = $("#your-name-qoute").val();
        if (!(nameRegex.test(fname))) {
            $("#your-name-qoute").removeClass('greenborder').addClass('redborder');

        } else if (fname == " ") {
            $("#your-name-qoute").removeClass('greenborder').addClass('redborder');
        } else {
            $("#your-name-qoute").removeClass('redborder').addClass('greenborder');
            return false;
        }
    });
    if ($("#your-company-qoute").val('')) {
        $("#your-company-qoute").val('Company name Please');
    }
    $('#your-company-qoute').focus(function () {
        if ($('#your-company-qoute').val() == 'Company name Please') {
            $('#your-company-qoute').val("");
        }
    });
    $('#your-company-qoute').blur(function () {
        var nameRegex = /^[0-9A-Za-z]+$/;
        var cname = $("#your-company-qoute").val();
        if (!(nameRegex.test(cname))) {
            $("#your-company-qoute").removeClass('greenborder').addClass('redborder');

        } else if (cname == " ") {
            $("#your-company-qoute").removeClass('greenborder').addClass('redborder');
        } else {
            $("#your-company-qoute").removeClass('redborder').addClass('greenborder');
            return false;
        }
    });
     if ($("#your-mobile-qoute").val('')) {
        $("#your-mobile-qoute").val('Contact number Please');
    }
    $('#your-mobile-qoute').focus(function () {
        if ($('#your-mobile-qoute').val() == 'Contact number Please') {
            $('#your-mobile-qoute').val("");
        }
    });
    $('#your-mobile-qoute').blur(function () {
        var nameRegex = /^\+?([0-9]{2})\)?[-. ]?([0-9]{4})[-. ]?([0-9]{4})$/;
        var mname = $("#your-mobile-qoute").val();
        if (!(nameRegex.test(mname))) {
            $("#your-mobile-qoute").removeClass('greenborder').addClass('redborder');
        } else if (mname == " ") {
            $("#your-mobile-qoute").removeClass('greenborder').addClass('redborder');
        } else {
            $("#your-mobile-qoute").removeClass('redborder').addClass('greenborder');
            return false;
        }
    });
    if ($("#your-email-qoute").val('')) {
        $("#your-email-qoute").val('Email addresss Please');
    }
    $('#your-email-qoute').focus(function () {
        if ($('#your-email-qoute').val() == 'Email addresss Please') {
            $('#your-email-qoute').val("");
        }
    });
    $('#your-email-qoute').blur(function () {
        var nameRegex = /^([\w-\.]+)@((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.)|(([\w-]+\.)+))([a-zA-Z]{2,4}|[0-9]{1,3})(\]?)$/;
        var ename = $("#your-email-qoute").val();
        if (!(nameRegex.test(ename))) {
            $("#your-email-qoute").removeClass('greenborder').addClass('redborder');

        } else if (ename == " ") {
            $("#your-email-qoute").removeClass('greenborder').addClass('redborder');
        } else {
            $("#your-email-qoute").removeClass('redborder').addClass('greenborder');
            return false;
        }
    });
    if ($("#your-message-qoute").val('')) {
        $("#your-message-qoute").val('Your message Please');
    }
    $('#your-message-qoute').focus(function () {
        if ($('#your-message-qoute').val() == 'Your message Please') {
            $('#your-message-qoute').val("");
        }
    });
    $('#your-message-qoute').blur(function () {
        var nameRegex = /^[0-9A-Za-z]+$/;
        var mename = $("#your-message-qoute").val();
        if (!(nameRegex.test(mename))) {
            $("#your-message-qoute").removeClass('greenborder').addClass('redborder');
        } else if (mename == " ") {
            $("#your-message-qoute").removeClass('greenborder').addClass('redborder');
        } else {
            $("#your-message-qoute").removeClass('redborder').addClass('greenborder');
            return false;
        }
    });
    $('#sb_submit_qoute1').live("click", function(){
        var $btn = this;
        $btn.innerHTML = 'Submitting...';
        var $form = '#'+this.closest('form').id;

        jQuery.post("forms/send-contact-form.php",
        {
            name: jQuery($form+' input[name=your_name]').val(),
            company_name: jQuery($form+' input[name=company_name]').val(),
            mobile_number: jQuery($form+' input[name=mobile_number]').val(),
            email: jQuery($form+' input[name=email]').val(),
            message: jQuery($form+' textarea[name=your_message]').val()
        },
        function(response){
            jQuery($form)[0].reset();
            $btn.innerHTML = 'Submit Request';
            alert('Your request has been submitted.');          
        });
    });
});

HTML

<form method="post" id="popup-qoute-form1" >
          <span style="font-size:22px;color:#FFF"><br>
          Quick Contact</span>
          <div class="row clearfix">
            <div class="popup-msg-box form-group col-md-12 col-sm-12 col-xs-12"></div>
            <!--Form Group-->
            <div class="form-group col-md-6 col-sm-6 col-xs-12">
              <input class="form-control" type="text" placeholder="Your Name" minlength="4" value="" id="your-name-qoute" name="your_name" required="required"/>
            </div>
            <!--Form Group-->
            <div class="form-group col-md-6 col-sm-6 col-xs-12">
              <input class="form-control" type="text" placeholder="Company Name" value="" id="your-company-qoute" name="company_name" required="required"/>
            </div>
            <div class="form-group col-md-6 col-sm-6 col-xs-12">
              <input class="form-control" type="text" placeholder="Mobile Number" value="" id="your-mobile-qoute" name="mobile_number" />
            </div>
            <!--Form Group-->
            <div class="form-group col-md-6 col-sm-6 col-xs-12">
              <input class="form-control" type="email" placeholder="Email" value="" id="your-email-qoute" name="email" />
            </div>
            
            <!--Form Group-->
            <div class="form-group col-md-12 col-sm-12 col-xs-12">
              <textarea class="form-control" rows="2" cols="20" placeholder="Your Message" id="your-message-qoute" name="your_message" /></textarea>
            </div>
            
            <!--Form Group-->
            <div class="form-group col-md-12 col-sm-12 col-xs-12 text-right"> <a href="javascript:void(0)" class="requesting custom-button light hidden-thing"><i class="fa fa-spinner" aria-hidden="true"></i> Requesting...</a> <a class="custom-button light" id="sb_submit_qoute1" class="next"> Submit Request </a> </div>
          </div>
        </form>

Have you checked your error log? Although it would be useful to provide the exact MySQL error message there, not just a generic message. — Shadow, Aug 22 '16 at 11:23
@Shadow my "showview" is not correct as per my knowledge.. can you please check that once. — Tammy, Aug 22 '16 at 11:26
You are not passing any data to your view, where your data are supposed to appear? — Tiago Engel, Aug 22 '16 at 11:28
No, I'm not going to check it until you provide a proper error message or error description. It is your code and your data. Do at least the basic debugging steps. — Shadow, Aug 22 '16 at 11:45
I've already add an answer on how you should do it. I will not make a "production version" of that code. Based on my answer you should be able to make your code to work. If you have any questions about my answer please leave a comment in the answer. — Tiago Engel, Aug 22 '16 at 12:08
@tiagohngl here i have updated my /showview as per your answer but still its not working... — Tammy, Aug 22 '16 at 17:15

score 1 · Accepted Answer · edited May 23 '17 at 12:24

1

You have to use some kind of template engine to render your data in an html file before sending it to the client. See What is a template engine and Using template engines

Basically in the /showView you shoud be doing something like this:

connection.query('select * from nodelist', function(err,res){
    if(err) throw err;    
    res.render('view.html', { items: res});

});

And in the view:

<table style="width:100%;border: 1px solid white;">

    <tr>
        <th>Category</th>
        <th>Cashtype</th> 
        <th>Amount</th>
        <th>Date</th>
    </tr>
    //pseudo code
    <tr>
        for each item in items
            <td>${item}</td>
        end
    <tr>

</table>

edited May 23 '17 at 12:24

Community

1
1

answered Aug 22 '16 at 11:48

Tiago Engel

3,533
1
17
22

app.get('/showView', function(req, res){ connection.query('SELECT * FROM nodetable', function(err, rows){ res.render('view.html', {items : rows}); }); }); – Tammy Aug 22 '16 at 17:17
You have to use a template engine, check the links I posted to understand how to do that. – Tiago Engel Aug 22 '16 at 20:17

validate form before submit using jquery

jQuery

HTML

1 Answers1