无法使用 jquery 验证来验证表单
Unable to validate the form using jquery validation
我在同一页面上有两个部分，我需要验证第一部分的数据，这就是我无法使用客户端验证的原因，因为它只有在提交整个表单后才有效。
所以我决定使用 jquery 验证来验证表单。
现在，我想在第 1 部分 Next 按钮单击时验证此表单。但是，现在发生了什么，当我单击下一步按钮时，它只是将我带到第二部分而不验证数据。有人可以帮我看看我做错了什么吗？
任何人请纠正我我在这里做错了什么或missing/wrongly在这里使用了任何引用。在我们继续第二部分之前，我需要验证数据。
//password requirement script
$(document).ready(function() {
$('#Passhash').keyup(function() {
// set password variable
var pswd = $('#Passhash').val();
//validate the length
if (pswd.length < 8) {
$('#length').removeClass('valid').addClass('invalid');
$('#length').removeClass('active');
} else {
$('#length').removeClass('invalid').addClass('valid');
$('#length').addClass('active');
}
if (pswd.match(/^[a-zA-Z0-9]*$/)) {
$('#specialChar').removeClass('valid').addClass('invalid');
$('#specialChar').removeClass('active');
} else {
$('#specialChar').removeClass('invalid').addClass('valid');
$('#specialChar').addClass('active');
}
if (pswd.match(/[A-Z]/)) {
$('#capital').removeClass('invalid').addClass('valid');
$('#capital').addClass('active');
} else {
$('#capital').removeClass('valid').addClass('invalid');
$('#capital').removeClass('active');
}
//validate number
if (pswd.match(/\d/)) {
$('#number').removeClass('invalid').addClass('valid');
$('#number').addClass('active');
} else {
$('#number').removeClass('valid').addClass('invalid');
$('#number').removeClass('active');
}
}).focus(function() {
$('#pswd_info').show();
}).blur(function() {
$('#pswd_info').hide();
});
});
$(document).ready(function() {
var nextCount = 1;
$('#btnNext').click(function() {
nextCount = nextCount + 1;
var count = VeriFyEmail();
var form = document.forms;
$(form).validate({
rules: {
EmailId: {
required: true,
email: true
},
YourName: {
required: true,
},
CompanyName: {
required: true,
},
PhoneNumber: {
required: true
},
Passhash: {
required: true,
minlength: 8
},
ConfirmPassword: {
required: true,
equalTo: "#Passhash"
}
},
messages: {
EmailId: {
required: "Please enter Email",
email: "Please enter a valid Email"
},
YourName: {
required: "Please enter YourName",
},
Passhash: {
required: "Please enter password",
minlength: "Password must be at least 8 characters long"
},
CompanyName: {
required: "Please enter Company Name"
},
PhoneNumber: {
required: "Please enter Phone Number"
},
ConfirmPassword: {
required: "Please enter Confirm Password",
equalTo: "Password and Confirm Password is different"
}
},
submitHandler: function(form) {
alert("Form Submitted Successfully")
}
});
if (nextCount == 2) {
$('#sectionSecond').show();
$('#sectionFirst').hide();
$('#btnBack').show();
mailsend();
} else if (nextCount == 2) {
$('#sectionSecond').show();
$('#sectionFirst').hide();
$(this).hide();
$('#btnSubmit').show();
}
});
$('#btnBack').click(function() {
nextCount = nextCount - 1;
if (nextCount == 1) {
$('#sectionFirst').show();
$('#sectionSecond').hide();
$('#btnBack').show();
$('#btnSubmit').hide();
$('#btnNext').show();
}
if (nextCount == 2) {
$('#sectionSecond').show();
$('#sectionFirst').hide();
$('#btnBack').show();
$('#btnSubmit').show();
$('#btnNext').hide();
} else if (nextCount == 2) {
$('#sectionSecond').show();
$('#sectionFirst').hide();
$(this).hide();
$('#btnSubmit').hide();
}
});
});
<script src="//code.jquery.com/jquery-1.10.2.js" type="text/javascript"></script>
<script src="//code.jquery.com/ui/1.11.2/jquery-ui.js" type="text/javascript"></script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.4.1/js/bootstrap-datepicker.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.4.1/css/bootstrap-datepicker3.css" />
<script src="~/Content/bootstrap/js/jquery-3.1.1.min.js"></script>
<script src="~/jquery/jquery-ui.min.js"></script>
<script src="~/js/bootstrap.min.js"></script>
<title>Xporta</title>
<meta charset="utf-8">
<!-- IE Edge Meta Tag -->
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="/Content/css/bootstrap.min.css">
<link rel="stylesheet" type="text/css" href="/Content/css/font-awesome.min.css">
<link rel="stylesheet" type="text/css" href="/Content/css/style.css">
<script src="/Content/js/jquery-3.1.1.min.js"></script>
<script src="/Content/js/bootstrap.bundle.min.js"></script>
<script src="/Content/js/custom.js"></script>
<script src="~/Scripts/jquery.validate.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-validate/1.17.0/jquery.validate.min.js"></script>
<form action="/Account/RegisterCompany" method="post">
<section id="sectionFirst">
<div class="container-fluid" id="main-div">
<div class="row row1">
<div class="col-md-6">
<div class="div-left align-self-md-center">
<div>
<a href="index.html"><img src="/Content/images/logo.png" class="img-fluid img1" alt="logo"></a>
</div>
<img src="/Content/images/img2.png" class="img-fluid img2" alt="">
<div class="txt1">
Fix your goals<br>
<b>we’ll help you achieve!</b>
</div>
</div>
</div>
<div class="col-md-6 align-self-center">
<div class="div-right">
<div>
<a href="Login" class="back-btn"><i class="fa fa-angle-left"></i> Back</a>
<ul>
<li class="process-div active"></li>
<li class="process-div"></li>
</ul>
<div class="txt2">General Information</div>
<p class="txt3">Please share your primary email id and create password</p>
<div class="row">
<div class="col-md-6">
<div class="form-group">
<input autocomplete="off" class="form-control input-custom" data-val="true" data-val-email="Invalid Email Address" data-val-required="EmailId Is Required" id="EmailId" name="EmailId" placeholder="Email ID *" type="text" value="" />
</div>
</div>
<div class="col-md-6">
<div class="form-group">
<input autocomplete="off" class="form-control input-custom" data-val="true" data-val-required="Your Name is required" id="YourName" name="YourName" placeholder="Your Name *" type="text" value="" />
</div>
</div>
</div>
<div class="row">
<div class="col-md-6">
<div class="form-group">
<input class="form-control input-custom" data-val="true" data-val-required="Company Name is required" id="CompanyName" name="CompanyName" placeholder="Company Name *" type="text" value="" />
</div>
</div>
<div class="col-md-6">
<div class="form-group">
<input autocomplete="off" class="form-control input-custom" data-val="true" data-val-required="Phone Number is required" id="PhoneNumber" name="PhoneNumber" placeholder="Mobile number *" type="text" value="" />
</div>
</div>
</div>
<div class="row">
<div class="col-md-6">
<div class="ph">
<div class="form-group">
<input type="password" name="Passhash" class="form-control input-custom" id="Passhash" placeholder="Create Password *" autocomplete="new-password" />
</div>
<div id="pswd_info">
<ul class="password-list">
<li id="capital"><i class="fa fa-check"></i> Atleast one capital letter</li>
<li id="specialChar"><i class="fa fa-check"></i> Atleast one Special character</li>
<li id="number"><i class="fa fa-check"></i> Atleast one Numeric digit</li>
<li id="length"><i class="fa fa-check"></i> Minimum 8 digit</li>
</ul>
</div>
</div>
</div>
<div class="col-md-6">
<div class="form-group">
<input type="password" name="ConfirmPassword" class="form-control input-custom" id="ConfirmPassword" placeholder="Re Enter Password *">
</div>
</div>
</div>
</div>
</div>
<div class="msg-boxsucess1 txtsuccess" style="color:crimson; font-size:large">
<span class="msg-boxsucess1 txtsuccess" id="emailError"></span>
</div>
<div class="btn-section">
<input type="button" id="btnNext" name="Next" class="btn-golden" value="Next" />
</div>
</div>
</div>
</div>
</section>
<section id="sectionSecond" style="display:none">
<div class="container-fluid" id="main-div">
</div>
</section>
</form>
jquery 验证插件仅在表单 提交 时触发。由于您没有提交表单，因此没有表单验证。
需要调用.valid()手动触发验证，添加
if (!$("form").valid()) return;
请注意，您的“第二部分”也采用相同的形式，因此也将得到验证。
删除了小问题的更新代码段：
$(document).ready(function() {
var nextCount = 1;
$('#btnNext').click(function() {
nextCount = nextCount + 1;
var count = 1; //VeriFyEmail();
var form = document.forms;
$(form).validate({
rules: {
EmailId: {
required: true,
email: true
},
"YourName": {
required: true,
},
CompanyName: {
required: true,
},
PhoneNumber: {
required: true
},
Passhash: {
required: true,
minlength: 8
},
},
messages: {
EmailId: {
required: "Please enter Email",
email: "Please enter a valid Email"
},
YourName: {
required: "Please enter Your Name",
},
Passhash: {
required: "Please enter password",
minlength: "Password must be at least 8 characters long"
},
CompanyName: {
required: "Please enter Company Name"
},
PhoneNumber: {
required: "Please enter Phone Number"
},
ConfirmPassword: {
required: "Please enter Confirm Password",
equalTo: "Password and Confirm Password is different"
}
},
submitHandler: function(form) {
alert("Form Submitted Successfully")
}
});
if (!$("form").valid()) return;
if (nextCount == 2) {
$('#sectionSecond').show();
$('#sectionFirst').hide();
$('#btnBack').show();
} else if (nextCount == 2) {
$('#sectionSecond').show();
$('#sectionFirst').hide();
$(this).hide();
$('#btnSubmit').show();
}
});
$('#btnBack').click(function() {
nextCount = nextCount - 1;
if (nextCount == 1) {
$('#sectionFirst').show();
$('#sectionSecond').hide();
$('#btnBack').show();
$('#btnSubmit').hide();
$('#btnNext').show();
}
if (nextCount == 2) {
$('#sectionSecond').show();
$('#sectionFirst').hide();
$('#btnBack').show();
$('#btnSubmit').show();
$('#btnNext').hide();
} else if (nextCount == 2) {
$('#sectionSecond').show();
$('#sectionFirst').hide();
$(this).hide();
$('#btnSubmit').hide();
}
});
});
<script src="//code.jquery.com/jquery-1.10.2.js" type="text/javascript"></script>
<script src="//code.jquery.com/ui/1.11.2/jquery-ui.js" type="text/javascript"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-validate/1.17.0/jquery.validate.min.js"></script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.4.1/js/bootstrap-datepicker.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.4.1/css/bootstrap-datepicker3.css" />
<form action="/Account/RegisterCompany" method="post">
<section id="sectionFirst">
<div class="container-fluid" id="main-div">
<div class="row row1">
<div class="col-md-6 align-self-center">
<div class="div-right">
<div>
<div class="txt2">General Information</div>
<p class="txt3">Please share your primary email id and create password</p>
<div class="row">
<div class="col-md-6">
<div class="form-group">
<input autocomplete="off" class="form-control input-custom" data-val="true" data-val-email="Invalid Email Address" data-val-required="EmailId Is Required" id="EmailId" name="EmailId" placeholder="Email ID *" type="text" value="" />
</div>
</div>
<div class="col-md-6">
<div class="form-group">
<input autocomplete="off" class="form-control input-custom" data-val="true" data-val-required="Your Name is required" id="YourName" name="YourName" required='required' placeholder="Your Name *" type="text" value="" />
</div>
</div>
</div>
<div class="row">
<div class="col-md-6">
<div class="form-group">
<input class="form-control input-custom" data-val="true" data-val-required="Company Name is required" id="CompanyName" name="CompanyName" placeholder="Company Name *" type="text" value="" />
</div>
</div>
<div class="col-md-6">
<div class="form-group">
<input autocomplete="off" class="form-control input-custom" data-val="true" data-val-required="Phone Number is required" id="PhoneNumber" name="PhoneNumber" placeholder="Mobile number *" type="text" value="" />
</div>
</div>
</div>
<div class="row">
<div class="col-md-6">
<div class="ph">
<div class="form-group">
<input type="password" name="Passhash" class="form-control input-custom" id="Passhash" placeholder="Create Password *" autocomplete="new-password" />
</div>
<div id="pswd_info">
<ul class="password-list">
<li id="capital"><i class="fa fa-check"></i> Atleast one capital letter</li>
<li id="specialChar"><i class="fa fa-check"></i> Atleast one Special character</li>
<li id="number"><i class="fa fa-check"></i> Atleast one Numeric digit</li>
<li id="length"><i class="fa fa-check"></i> Minimum 8 digit</li>
</ul>
</div>
</div>
</div>
<div class="col-md-6">
<div class="form-group">
<input type="password" name="ConfirmPassword" class="form-control input-custom" id="ConfirmPassword" placeholder="Re Enter Password *">
</div>
</div>
</div>
</div>
</div>
<div class="msg-boxsucess1 txtsuccess" style="color:crimson; font-size:large">
<span class="msg-boxsucess1 txtsuccess" id="emailError"></span>
</div>
<div class="btn-section">
<input type="button" id="btnNext" name="Next" class="btn-golden" value="Next" />
</div>
</div>
</div>
</div>
</section>
<section id="sectionSecond" style="display:none">
<div class="container-fluid" id="main-div2">
Second Section
</div>
</section>
</form>
我在同一页面上有两个部分，我需要验证第一部分的数据，这就是我无法使用客户端验证的原因，因为它只有在提交整个表单后才有效。 所以我决定使用 jquery 验证来验证表单。
现在，我想在第 1 部分 Next 按钮单击时验证此表单。但是，现在发生了什么，当我单击下一步按钮时，它只是将我带到第二部分而不验证数据。有人可以帮我看看我做错了什么吗？
任何人请纠正我我在这里做错了什么或missing/wrongly在这里使用了任何引用。在我们继续第二部分之前，我需要验证数据。
//password requirement script
$(document).ready(function() {
$('#Passhash').keyup(function() {
// set password variable
var pswd = $('#Passhash').val();
//validate the length
if (pswd.length < 8) {
$('#length').removeClass('valid').addClass('invalid');
$('#length').removeClass('active');
} else {
$('#length').removeClass('invalid').addClass('valid');
$('#length').addClass('active');
}
if (pswd.match(/^[a-zA-Z0-9]*$/)) {
$('#specialChar').removeClass('valid').addClass('invalid');
$('#specialChar').removeClass('active');
} else {
$('#specialChar').removeClass('invalid').addClass('valid');
$('#specialChar').addClass('active');
}
if (pswd.match(/[A-Z]/)) {
$('#capital').removeClass('invalid').addClass('valid');
$('#capital').addClass('active');
} else {
$('#capital').removeClass('valid').addClass('invalid');
$('#capital').removeClass('active');
}
//validate number
if (pswd.match(/\d/)) {
$('#number').removeClass('invalid').addClass('valid');
$('#number').addClass('active');
} else {
$('#number').removeClass('valid').addClass('invalid');
$('#number').removeClass('active');
}
}).focus(function() {
$('#pswd_info').show();
}).blur(function() {
$('#pswd_info').hide();
});
});
$(document).ready(function() {
var nextCount = 1;
$('#btnNext').click(function() {
nextCount = nextCount + 1;
var count = VeriFyEmail();
var form = document.forms;
$(form).validate({
rules: {
EmailId: {
required: true,
email: true
},
YourName: {
required: true,
},
CompanyName: {
required: true,
},
PhoneNumber: {
required: true
},
Passhash: {
required: true,
minlength: 8
},
ConfirmPassword: {
required: true,
equalTo: "#Passhash"
}
},
messages: {
EmailId: {
required: "Please enter Email",
email: "Please enter a valid Email"
},
YourName: {
required: "Please enter YourName",
},
Passhash: {
required: "Please enter password",
minlength: "Password must be at least 8 characters long"
},
CompanyName: {
required: "Please enter Company Name"
},
PhoneNumber: {
required: "Please enter Phone Number"
},
ConfirmPassword: {
required: "Please enter Confirm Password",
equalTo: "Password and Confirm Password is different"
}
},
submitHandler: function(form) {
alert("Form Submitted Successfully")
}
});
if (nextCount == 2) {
$('#sectionSecond').show();
$('#sectionFirst').hide();
$('#btnBack').show();
mailsend();
} else if (nextCount == 2) {
$('#sectionSecond').show();
$('#sectionFirst').hide();
$(this).hide();
$('#btnSubmit').show();
}
});
$('#btnBack').click(function() {
nextCount = nextCount - 1;
if (nextCount == 1) {
$('#sectionFirst').show();
$('#sectionSecond').hide();
$('#btnBack').show();
$('#btnSubmit').hide();
$('#btnNext').show();
}
if (nextCount == 2) {
$('#sectionSecond').show();
$('#sectionFirst').hide();
$('#btnBack').show();
$('#btnSubmit').show();
$('#btnNext').hide();
} else if (nextCount == 2) {
$('#sectionSecond').show();
$('#sectionFirst').hide();
$(this).hide();
$('#btnSubmit').hide();
}
});
});
<script src="//code.jquery.com/jquery-1.10.2.js" type="text/javascript"></script>
<script src="//code.jquery.com/ui/1.11.2/jquery-ui.js" type="text/javascript"></script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.4.1/js/bootstrap-datepicker.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.4.1/css/bootstrap-datepicker3.css" />
<script src="~/Content/bootstrap/js/jquery-3.1.1.min.js"></script>
<script src="~/jquery/jquery-ui.min.js"></script>
<script src="~/js/bootstrap.min.js"></script>
<title>Xporta</title>
<meta charset="utf-8">
<!-- IE Edge Meta Tag -->
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="/Content/css/bootstrap.min.css">
<link rel="stylesheet" type="text/css" href="/Content/css/font-awesome.min.css">
<link rel="stylesheet" type="text/css" href="/Content/css/style.css">
<script src="/Content/js/jquery-3.1.1.min.js"></script>
<script src="/Content/js/bootstrap.bundle.min.js"></script>
<script src="/Content/js/custom.js"></script>
<script src="~/Scripts/jquery.validate.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-validate/1.17.0/jquery.validate.min.js"></script>
<form action="/Account/RegisterCompany" method="post">
<section id="sectionFirst">
<div class="container-fluid" id="main-div">
<div class="row row1">
<div class="col-md-6">
<div class="div-left align-self-md-center">
<div>
<a href="index.html"><img src="/Content/images/logo.png" class="img-fluid img1" alt="logo"></a>
</div>
<img src="/Content/images/img2.png" class="img-fluid img2" alt="">
<div class="txt1">
Fix your goals<br>
<b>we’ll help you achieve!</b>
</div>
</div>
</div>
<div class="col-md-6 align-self-center">
<div class="div-right">
<div>
<a href="Login" class="back-btn"><i class="fa fa-angle-left"></i> Back</a>
<ul>
<li class="process-div active"></li>
<li class="process-div"></li>
</ul>
<div class="txt2">General Information</div>
<p class="txt3">Please share your primary email id and create password</p>
<div class="row">
<div class="col-md-6">
<div class="form-group">
<input autocomplete="off" class="form-control input-custom" data-val="true" data-val-email="Invalid Email Address" data-val-required="EmailId Is Required" id="EmailId" name="EmailId" placeholder="Email ID *" type="text" value="" />
</div>
</div>
<div class="col-md-6">
<div class="form-group">
<input autocomplete="off" class="form-control input-custom" data-val="true" data-val-required="Your Name is required" id="YourName" name="YourName" placeholder="Your Name *" type="text" value="" />
</div>
</div>
</div>
<div class="row">
<div class="col-md-6">
<div class="form-group">
<input class="form-control input-custom" data-val="true" data-val-required="Company Name is required" id="CompanyName" name="CompanyName" placeholder="Company Name *" type="text" value="" />
</div>
</div>
<div class="col-md-6">
<div class="form-group">
<input autocomplete="off" class="form-control input-custom" data-val="true" data-val-required="Phone Number is required" id="PhoneNumber" name="PhoneNumber" placeholder="Mobile number *" type="text" value="" />
</div>
</div>
</div>
<div class="row">
<div class="col-md-6">
<div class="ph">
<div class="form-group">
<input type="password" name="Passhash" class="form-control input-custom" id="Passhash" placeholder="Create Password *" autocomplete="new-password" />
</div>
<div id="pswd_info">
<ul class="password-list">
<li id="capital"><i class="fa fa-check"></i> Atleast one capital letter</li>
<li id="specialChar"><i class="fa fa-check"></i> Atleast one Special character</li>
<li id="number"><i class="fa fa-check"></i> Atleast one Numeric digit</li>
<li id="length"><i class="fa fa-check"></i> Minimum 8 digit</li>
</ul>
</div>
</div>
</div>
<div class="col-md-6">
<div class="form-group">
<input type="password" name="ConfirmPassword" class="form-control input-custom" id="ConfirmPassword" placeholder="Re Enter Password *">
</div>
</div>
</div>
</div>
</div>
<div class="msg-boxsucess1 txtsuccess" style="color:crimson; font-size:large">
<span class="msg-boxsucess1 txtsuccess" id="emailError"></span>
</div>
<div class="btn-section">
<input type="button" id="btnNext" name="Next" class="btn-golden" value="Next" />
</div>
</div>
</div>
</div>
</section>
<section id="sectionSecond" style="display:none">
<div class="container-fluid" id="main-div">
</div>
</section>
</form>
jquery 验证插件仅在表单 提交 时触发。由于您没有提交表单，因此没有表单验证。
需要调用.valid()手动触发验证，添加
if (!$("form").valid()) return;
请注意，您的“第二部分”也采用相同的形式，因此也将得到验证。
删除了小问题的更新代码段：
$(document).ready(function() {
var nextCount = 1;
$('#btnNext').click(function() {
nextCount = nextCount + 1;
var count = 1; //VeriFyEmail();
var form = document.forms;
$(form).validate({
rules: {
EmailId: {
required: true,
email: true
},
"YourName": {
required: true,
},
CompanyName: {
required: true,
},
PhoneNumber: {
required: true
},
Passhash: {
required: true,
minlength: 8
},
},
messages: {
EmailId: {
required: "Please enter Email",
email: "Please enter a valid Email"
},
YourName: {
required: "Please enter Your Name",
},
Passhash: {
required: "Please enter password",
minlength: "Password must be at least 8 characters long"
},
CompanyName: {
required: "Please enter Company Name"
},
PhoneNumber: {
required: "Please enter Phone Number"
},
ConfirmPassword: {
required: "Please enter Confirm Password",
equalTo: "Password and Confirm Password is different"
}
},
submitHandler: function(form) {
alert("Form Submitted Successfully")
}
});
if (!$("form").valid()) return;
if (nextCount == 2) {
$('#sectionSecond').show();
$('#sectionFirst').hide();
$('#btnBack').show();
} else if (nextCount == 2) {
$('#sectionSecond').show();
$('#sectionFirst').hide();
$(this).hide();
$('#btnSubmit').show();
}
});
$('#btnBack').click(function() {
nextCount = nextCount - 1;
if (nextCount == 1) {
$('#sectionFirst').show();
$('#sectionSecond').hide();
$('#btnBack').show();
$('#btnSubmit').hide();
$('#btnNext').show();
}
if (nextCount == 2) {
$('#sectionSecond').show();
$('#sectionFirst').hide();
$('#btnBack').show();
$('#btnSubmit').show();
$('#btnNext').hide();
} else if (nextCount == 2) {
$('#sectionSecond').show();
$('#sectionFirst').hide();
$(this).hide();
$('#btnSubmit').hide();
}
});
});
<script src="//code.jquery.com/jquery-1.10.2.js" type="text/javascript"></script>
<script src="//code.jquery.com/ui/1.11.2/jquery-ui.js" type="text/javascript"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-validate/1.17.0/jquery.validate.min.js"></script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.4.1/js/bootstrap-datepicker.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.4.1/css/bootstrap-datepicker3.css" />
<form action="/Account/RegisterCompany" method="post">
<section id="sectionFirst">
<div class="container-fluid" id="main-div">
<div class="row row1">
<div class="col-md-6 align-self-center">
<div class="div-right">
<div>
<div class="txt2">General Information</div>
<p class="txt3">Please share your primary email id and create password</p>
<div class="row">
<div class="col-md-6">
<div class="form-group">
<input autocomplete="off" class="form-control input-custom" data-val="true" data-val-email="Invalid Email Address" data-val-required="EmailId Is Required" id="EmailId" name="EmailId" placeholder="Email ID *" type="text" value="" />
</div>
</div>
<div class="col-md-6">
<div class="form-group">
<input autocomplete="off" class="form-control input-custom" data-val="true" data-val-required="Your Name is required" id="YourName" name="YourName" required='required' placeholder="Your Name *" type="text" value="" />
</div>
</div>
</div>
<div class="row">
<div class="col-md-6">
<div class="form-group">
<input class="form-control input-custom" data-val="true" data-val-required="Company Name is required" id="CompanyName" name="CompanyName" placeholder="Company Name *" type="text" value="" />
</div>
</div>
<div class="col-md-6">
<div class="form-group">
<input autocomplete="off" class="form-control input-custom" data-val="true" data-val-required="Phone Number is required" id="PhoneNumber" name="PhoneNumber" placeholder="Mobile number *" type="text" value="" />
</div>
</div>
</div>
<div class="row">
<div class="col-md-6">
<div class="ph">
<div class="form-group">
<input type="password" name="Passhash" class="form-control input-custom" id="Passhash" placeholder="Create Password *" autocomplete="new-password" />
</div>
<div id="pswd_info">
<ul class="password-list">
<li id="capital"><i class="fa fa-check"></i> Atleast one capital letter</li>
<li id="specialChar"><i class="fa fa-check"></i> Atleast one Special character</li>
<li id="number"><i class="fa fa-check"></i> Atleast one Numeric digit</li>
<li id="length"><i class="fa fa-check"></i> Minimum 8 digit</li>
</ul>
</div>
</div>
</div>
<div class="col-md-6">
<div class="form-group">
<input type="password" name="ConfirmPassword" class="form-control input-custom" id="ConfirmPassword" placeholder="Re Enter Password *">
</div>
</div>
</div>
</div>
</div>
<div class="msg-boxsucess1 txtsuccess" style="color:crimson; font-size:large">
<span class="msg-boxsucess1 txtsuccess" id="emailError"></span>
</div>
<div class="btn-section">
<input type="button" id="btnNext" name="Next" class="btn-golden" value="Next" />
</div>
</div>
</div>
</div>
</section>
<section id="sectionSecond" style="display:none">
<div class="container-fluid" id="main-div2">
Second Section
</div>
</section>
</form>