jQuery Validate不适用于以下代码

时间:2019-02-28 19:18:13

标签: jquery jquery-validate

我正在尝试使用jQuery Validate插件来验证字段。由于某些未知原因,它不起作用。

我的代码如下:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Validation</title>
    <script src="https://ajax.aspnetcdn.com/ajax/jQuery/jquery-3.3.1.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-validate/1.19.0/jquery.validate.js"></script>
    <script>

  $("form[name='formval']").validate({

    rules: {
      pr_amt: "required",
      period: "required",
      time: "required",
      int_rate: "required",
      insurance_rate: "required",
    },
    // Specify validation error messages
messages: {
pr_amt: "Please enter the loan amount",
period: "Please enter the downpayment amount",
time: "Please enter the loantenure slot",
insurance_rate: "Please the insurance rate"
},

    submitHandler: function(form) {
      //form.submit();
    }
  });
    </script>
</head>
<body>
    <form name="formval" class="form-horizontal col-md-8" method="post" action="">
        <div class="form-group">
            <label for="pr_amt" class="col-sm-4 control-label">Loan Amount</label>
            <div class="col-sm-8">
            <div class="input-group">
            <span class="input-group-addon">SAR</span>
            <input type="text" class="form-control input-sm" id="pr_amt" name="pr_amt" placeholder="Enter Loan Amount">
            </div>
            </div>
        </div>

        <div class="form-group">
            <label for="period" class="col-sm-4 control-label">Down Payment</label>
            <div class="col-sm-8">
            <input type="text" class="form-control input-sm" id="period" placeholder="(in Saudi Riyal)" name="period">
            </div>
        </div>

        <div class="form-group">
            <label for="time" class="col-sm-4 control-label">Loan Tenure</label>
            <div class="col-sm-8">
            <input type="text" class="form-control input-sm" id="time" placeholder="(in months)" name="time">
            </div>
        </div>
        <div class="form-group">
            <label for="int_rate" class="col-sm-4 control-label">Rate of Interest</label>
            <div class="col-sm-8">
            <div class="input-group">
            <input type="text" class="form-control input-sm" id="int_rate" name="int_rate">
            <span class="input-group-addon">%</span>
            </div>
            </div>
        </div>

        <div class="form-group">
            <label for="insurance_rate" class="col-sm-4 control-label">Inurance Rate</label>
            <div class="col-sm-8">
            <div class="input-group">
            <input type="text" class="form-control input-sm" id="insurance_rate" name="insurance_rate">
            <span class="input-group-addon">%</span>
            </div>
            </div>
        </div>

        <div class="form-group">
            <div class="col-sm-offset-4 col-sm-12">
            <button type="button" name="calculate" value="Calculate" class="btn btn-primary">Calculate EMI</button>
            <button type="reset" class="btn btn-link">Reset All</button>
            </div>
        </div>

    </form>
</body>
</html>

但是,如果我尝试一个简单的代码,那么它就起作用了。我已经尝试了以下代码集,效果很好。

    <!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Validation</title>
    <script src="https://ajax.aspnetcdn.com/ajax/jQuery/jquery-3.3.1.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-validate/1.19.0/jquery.validate.js"></script>
    <script>
    $('document').ready(function(){
    $("form[name='formval']").validate({

    rules: {
      firstname: "required",
      lastname: "required",
      email: "required",
    },
    // Specify validation error messages
    messages: {
      firstname: "Please enter your firstname",
      lastname: "Please enter your lastname",
      email: "Please enter your email",
    },

    submitHandler: function(form) {
      //form.submit();
    }
  });
    })
    </script>
</head>
<body>
    <form action="" method="" name="formval">
        <label for="firstname">First Name</label>
        <input type="text" name="firstname" id="firstname"><br>

        <label for="lastname">Last Name</label>
        <input type="text" name="lastname" id="lastname"><br>

        <label for="email">Email</label>
        <input type="email" name="email" id="email"><br>

        <button class="btn btn primary">Submit</button>
        <button class="btn btn primary">Reset</button>

    </form>
</body>
</html>

在这种情况下请帮助我。我的html结构是相同的,因此我必须遵循该结构。

1 个答案:

答案 0 :(得分:0)

您使用的是按钮类型按钮,请使用提交而不是按钮类型按钮

def lstm(embedding_size, hidden_layer_size, learning_rate):
    return score
$(function(){
$("form[name='formval']").validate({

    rules: {
      pr_amt: "required",
      period: "required",
      time: "required",
      int_rate: "required",
      insurance_rate: "required",
    },
    // Specify validation error messages
messages: {
pr_amt: "Please enter the loan amount",
period: "Please enter the downpayment amount",
time: "Please enter the loantenure slot",
insurance_rate: "Please the insurance rate"
},

    submitHandler: function(form) {
      //form.submit();
    }
  });	
})