使用bootstrap工具提示调用Ajax

时间:2014-11-21 13:02:13

标签: javascript jquery ajax node.js

我正在使用工具提示验证表单并使用警告消息对后端响应执行ajax调用。虽然我正在验证我正在使用表单ID进行ajax调用和工具提示验证。所以我的问题是,即使我得到空文本验证并进入ajax成功调用。如何将工具提示与ajax调用结合起来。

 script.
      $(document).ready
        console.log('bbbbbbbb');

        $('#loginform').submit(function(e) {
        console.log('submit called');

        var data = {};
        data.email = $('#username').val();
        data.password = $('#password').val();
        JSON.stringify(data);
        console.log(data);


        $.ajax({
          url: "/login",
          type: "POST",
          dataType: 'json',
          data: JSON.stringify({ "objectData": data}),
          contentType: "application/json",

          success: function(data) {
            alert('SUCCESS":'+JSON.stringify(data));
            var successVar = data;
            alert(successVar.data);

            if(successVar.data == "Invalid username And Password"){
            showfailure();

            }
            if(successVar.data == "Login successfully"){
            showdiv();
              location.href='http://localhost:3000/landing';
            }


          },

        });
      return false;
      });
    $('#loginform').click(function(){
          loginValidation();
          });
         function loginValidation(){

          $('#loginform').validate({
            rules : {
            email_id : {
            minlength : 5,
            required : true,
            email : true
            },
            password : {
            minlength : 5,
            required : true
            }
            },
            messages : {
            email : "Enter Valid Email Address.",
            password : "Enter Password"
            }
            });
            }
  Login form:
.middle
    .container
      #login-modal.modal.fade(tabindex='-1', role='dialog', aria-labelledby='myModalLabel', aria-hidden='true')
        .modal-dialog
          .modal-content(style='margin-top:120px;')
            .modal-header.login_modal_header
              button.close(type='button', data-dismiss='modal', aria-hidden='true') ×
              h2#myModalLabel.modal-title Sign In
            .modal-body.login-modal           
              .clearfix
              #social-icons-conatainer
                .modal-body-left
                  form#loginform(method="#",action="#")
                    .form-group
                      input#username.form-control.login-field(type='email', name='email_id', value='', data-placement='bottom' placeholder='Email Id',
                      maxlength='25',title="Enter your email address here", required)
                      i.fa.fa-envelope.login-field-icon
                    .form-group
                      input#password.form-control.login-field(type='password', name='password', value='',data-placement='bottom', placeholder='Password',
                      maxlength='15',title="Enter your password here",required)
                      i.fa.fa-lock.login-field-icon
                      #loginSuccess.alert.alert-success(style='display:none')
                        a.close(href='#', data-dismiss='alert') ×
                        strong Success!
                        | Login successfully.
                      #loginFailure.alert.alert-danger(style='display:none')
                        a.close(href='#', data-dismiss='alert') ×
                        strong Failed!
                        | Invalid Username and Password.  

                    button#loginbtn.btn.btn-success.modal-login-btn.color(type="submit") Sign In
                    p Having trouble sign in? <a href="#forgot-modal", class="form-signin-link.login", data-toggle="modal", data-target="#forgot-modal"> Click Here </a>
                .modal-body-right
                  .modal-social-icons
                    a.btn.btn-default.facebook(href='#')
                      i.fa.fa-facebook.modal-icons
                      | Sign In with Facebook                  
                    a.btn.btn-default.google(href='/auth/google')
                      i.fa.fa-google-plus.modal-icons
                      | Sign In with Google                  
                #center-line  OR 
              .clearfix
              .form-group.modal-register-btn
                p Don't have an account? <a href="#signup-modal", data-toggle="modal", data-target="#signup-modal"> Create an Account </a>
            .clearfix
            .modal-footer.login_modal_footer

My call:
exports.login = function(req, res) {
    console.log("enter the login999999999");
    console.log(req.body); 
  var resultObject = (req.body.objectData);

 client.query("SELECT * FROM login where email_id='" + resultObject.email + "' AND password='" + resultObject.password + "'", function(err, result) {
    console.log("Row count: %d",result.rows.length);  // n
    if(result.rows.length>0){
        console.log('successfully');
        res.send({data:"Login successfully"});
    } else {
        console.log('not successfully');
        res.send({data:"Invalid username And Password"});
    }
});




 };

1 个答案:

答案 0 :(得分:1)

你试试这个:

script.
  $(document).ready
    console.log('bbbbbbbb');
    $('#loginform').validate({
        rules : {
        email_id : {
        minlength : 5,
        required : true,
        email : true
        },
        password : {
        minlength : 5,
        required : true
        }
        },

        messages : {
        email : "Enter Valid Email Address.",
        password : "Enter Password"

        },
        submitHandler: function (form) {
        alert('submit');
        var data = {};
        data.email = $('#username').val();
        data.password = $('#password').val();
        JSON.stringify(data);
        console.log(data);
        $.ajax({
          url: "/login",
          type: "POST",
          dataType: 'json',
          data: JSON.stringify({ "objectData": data}),
          contentType: "application/json",         

          success: function(data) {
            alert('SUCCESS":'+JSON.stringify(data));
            var successVar = data;
            alert(successVar.data);

            if(successVar.data == "Invalid username And Password"){
            showfailure();

            }
            if(successVar.data == "Login successfully"){
            showdiv();
              location.href='http://localhost:3000/landing';
            }           

          },

        });
        return false;
        }
        });



  function showdiv()
  {
    document.getElementById("loginFailure").style.display="none";
    document.getElementById("loginSuccess").style.display="block";
  }
  function showfailure()
  {
    document.getElementById("loginFailure").style.display="block";
  }