-1

У меня есть jquery, который отлично работает над проверкой, но отправляет сообщение, если входы имеют значение NULL. Как я могу сделать кнопку отправки также для проверки того, являются ли эти поля пустыми до того, как они будут отправлены.проверить форму перед отправкой с помощью jquery

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>

источник

2016-08-22 Tanmoy Sarkar

Вы проверили журнал ошибок? Хотя было бы полезно предоставить точное сообщение об ошибке MySQL, а не только общее сообщение. – Shadow

@ Тень моего «шоу-шоу» не соответствует моим знаниям .. можете ли вы, пожалуйста, проверить это один раз. –

Вы не передаёте какие-либо данные вашему представлению, где должны отображаться ваши данные? –

Вы должны использовать какой-то механизм шаблонов для визуализации данных в 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>

источник

2016-08-22 11:48:47

app.get ('/ showView', function (req, res) { connection.query ('SELECT * FROM nodetable' , function (err, rows) { res.render ('view.html', {items: rows}); }); }); –

Вам нужно использовать механизм шаблонов, проверить ссылки, которые я разместил, чтобы понять, как это сделать. –

проверить форму перед отправкой с помощью jquery

JQuery

HTML

ответ

Смежные вопросы