在使用jquery提交之前验证表单

Question

我有一个jquery，它将完美地进行验证，但如果输入为null则发送消息。我怎样才能提交提交按钮，以便在提交之前验证这些文件是否为空。

的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>

Answer 1

在将数据发送到客户端之前，您必须使用某种模板引擎在html文件中呈现数据。请参阅What is a template engine和Using template engines

基本上在/showView你应该做这样的事情：

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

});

在视图中：

<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>