Browse Source

Basic Customer Registration

feature/19315_Customer-Registration-new
Dinesh 12 months ago
parent
commit
b2f81c8e29
  1. 258
      CustomerOnlineV2/CustomerOnlineV2/Views/Customer/CustomerRegistration.cshtml

258
CustomerOnlineV2/CustomerOnlineV2/Views/Customer/CustomerRegistration.cshtml

@ -88,7 +88,7 @@
</div>
<div class="col-lg-12">
<h5 class="mb-4">Login Details</h5>
<h5 class="mb-4">Your Details</h5>
</div>
<div class="col-md-4">
<div class="mb-4">
@ -108,8 +108,8 @@
<input type="password" class="form-control" asp-for="Password">
<span id="password-validation" class="text-danger"></span>
<label asp-for="Password"></label>
@*
<input type="password" class="form-control" asp:RegularExpressionValidator asp-for="Password" runat="server" ErrorMessage="Invalid Password Charecters"
@*<input type="password" class="form-control" asp:RegularExpressionValidator asp-for="Password" runat="server" ErrorMessage="Invalid Password Charecters"
ValidationExpression="^(?=.*\d)(?=.*[a-z])(?=.*[A-Z]).{8}$" ControlToValidate="txtPassword" ForeColor="Red">
<span asp-validation-for="@Model.Password" class="error"></span> *@
</div>
@ -130,19 +130,10 @@
</div>
</div>
</div>
</div>
</div>
</div>
<div class="card bg-light border-0 mb-4">
<div class="card-body">
<div class="row">
<div class="col-lg-12">
<h5 class="mb-4">Personal Information</h5>
</div>
<div class="col-md-4">
<div class="mb-4">
<div class="form-floating mb-3">
<input type="text" asp-for = "firstName" class="form-control" required>
<input type="text" asp-for="firstName" class="form-control" required>
<label for="floatingInput">First Name</label>
</div>
</div>
@ -163,180 +154,50 @@
</div>
</div>
</div>
@* <div class="col-md-4">
<div class="mb-4">
<div class="form-floating">
<input type="password" class="form-control" asp-for="Password">
<span id="confirm-password-validation" class="text-danger"></span>
<label for="floatingPassword">Password</label>
</div>
</div>
</div> *@
<div class="col-md-4">
<div class="mb-4">
<div class="form-floating">
<select class="form-select" asp-for="country" asp-items="@CustomerOnlineV2.Helper.HelperClass.GetDropdownData("allCountrylist", true)" aria-label="Floating label select example">
@* <option selected></option>
<option value="1">Nepal</option>
<option value="2">India</option>
<option value="3">Pakistan</option> *@
</select>
@* select class="form-select form-control" asp-for="Country" asp-items="@CustomerOnlineV2.Helper.HelperClass.GetDropdownData("allCountrylist", true)" class="form-select" required onkeydown="PaymentMethodChangeEvent"> *@
<label for="Nationality">Nationality</label>
</div>
</div>
</div>
<div class="col-md-4">
<div class="mb-4">
<div class="form-floating">
<select class="form-select" asp-for="idType" aria-label="Floating label select example" asp-items="@CustomerOnlineV2.Helper.HelperClass.GetDropdownData("getIdType", true)" required>
@* <option value="" selected></option>
<option value="Bank Statement">Bank Statement</option>
<option value="DRIVER LICENSE">Driver License</option>
<option value="EEA national Id Card">EEA national Id Card</option>
<option value="HM Forces ID">HM Forces ID</option>
<option value="other Valid documents">other Valid documents</option>
<option value="PASSPORT">Passport</option>
<option value="RESIDENT CARD">Resident Card</option>
<option value="Utility bill">Utility bill</option> *@
</select>
<label for="Nationality">ID Type</label>
</div>
</div>
</div>
<div class="col-md-4">
<div class="mb-4">
<div class="form-floating">
<input type="text" class="form-control" asp-for= "idNumber" placeholder="Password">
<label for="IdNUmber">Id Number</label>
</div>
</div>
</div>
<div class="col-md-4">
<div class="mb-0">
<div class="input-group flex-nowrap">
<div class="form-floating flex-grow-1">
<input type="date" asp-for = "dob" class="datepicker-here form-control date-of-birth" placeholder="dd/mm/yyyy" aria-describedby="basic-addon2" required />
<input type="date" asp-for="dob" class="datepicker-here form-control date-of-birth" placeholder="dd/mm/yyyy" aria-describedby="basic-addon2" required />
<label for="DateOfBirth" class="form-label">Date Of Birth</label>
</div>
@* <span class="input-group-text px-4">
<i class="fa fa-calendar"></i>
@* <span class="input-group-text px-4">
<i class="fa fa-calendar"></i>
</span> *@
</div>
</div>
</div>
<div class="col-md-4">
<div class="mb-4">
<div class="form-floating">
<select class="form-select" asp-for="nativeCountry" asp-items="@CustomerOnlineV2.Helper.HelperClass.GetDropdownData("allCountrylist", true)" aria-label="Floating label select example">
@* <option selected></option>
<option value="1">Nepal</option>
<option value="2">India</option>
<option value="3">Pakistan</option> *@
</select>
<label for="IssueCountry">Issue Country</label>
</div>
</div>
</div>
<div class="col-md-4">
<div class="mb-4">
<div class="form-floating">
<select class="form-select" asp-for="gender" asp-items="@CustomerOnlineV2.Helper.HelperClass.GetDropdownData("getGender", true)" aria-label="Floating label select example">
@* <option selected></option>
<option value="1">Male</option>
<option value="2">Famale</option> *@
</select>
<label for="Gender">Gender</label>
</div>
</div>
</div>
<div class="col-md-4">
<div class="mb-4">
<div class="input-group flex-nowrap ">
<div class="form-floating flex-grow-1 input-file">
<input type="text" id="DocFront" class="form-control" placeholder="Chose File..." />
<label for="DocFront">Upload Document</label>
</div>
<span class="input-group-text px-2">
<button class="btn-choose bg-transparent text-white border-0" type="button">Upload</button>
</span>
</div>
</div>
</div>
<div class="col-md-4">
<div class="mb-0">
<div class="input-group flex-nowrap">
<div class="form-floating flex-grow-1">
<input type="date" asp-for="idIssueDate" class="datepicker-here form-control issue-date" placeholder="dd/mm/yyyy" aria-describedby="basic-addon2" />
<label for="IdIssue" class="form-label">Id Issue Date</label>
</div>
@* <span class="input-group-text px-4">
<i class="fa fa-calendar"></i>
</span> *@
</div>
</div>
</div>
<div class="col-md-4">
<div class="mb-0">
<div class="input-group flex-nowrap">
<div class="form-floating flex-grow-1">
<input type="date" asp-for="idExpiryDate" class="datepicker-here form-control expire-date" placeholder="dd/mm/yyyy" aria-describedby="basic-addon2" />
<label for="IdExpire" class="form-label">Id Expire Date</label>
</div>
@* <span class="input-group-text px-4">
<i class="fa fa-calendar"></i>
</span> *@
</div>
</div>
</div>
</div>
</div>
</div>
<div class="card bg-light border-0 mb-4">
<div class="card-body">
<div class="row">
<div class="col-lg-12">
<h5 class="mb-4">Contact Details</h5>
</div>
<div class="col-md-4">
<div class="mb-4">
<div class="form-floating">
<select class="form-select" asp-for="nativeCountry" asp-items="@CustomerOnlineV2.Helper.HelperClass.GetDropdownData("allCountrylist", true)" aria-label="Floating label select example" required>
@* <option selected></option>
<option value="1">Nepal</option>
<option value="2">India</option>
<option value="3">Pakistan</option> *@
</select>
<label for="Country">Country</label>
</div>
</div>
</div>
@* <div class="col-md-4">
<div class="mb-4">
<div class="form-floating">
<input type="text" class="form-control" id="CountryAddress1" placeholder="Address 1" asp-for="address">
<label for="CountryAddress1">Address 1</label>
</div>
</div>
</div>
<div class="col-md-4">
<div class="mb-4">
<div class="form-floating">
<input type="text" class="form-control" id="CountryAddress2" placeholder="Address 2" asp-for="address2">
<label for="CountryAddress2">Address 2</label>
</div>
</div>
</div> *@
<div class="col-md-4">
<div class="mb-4">
<div class="form-floating">
<div class="input-group flex-nowrap">
<div class="form-floating flex-grow-1">
<input type="text" class="form-control" placeholder="Postal/Zip Code" asp-for="postalCode">
<input type="text" class="form-control" placeholder="Postal/Zip Code" asp-for="postalCode">
<label for="postalCode">Postal/Zip Code</label>
</div>
<span class="input-group-text px-2">
<button class="btn-choose bg-transparent text-white border-0" id="btnSearch" type="button">Lookup</button>
<button class="btn-choose bg-transparent text-white border-0" id="btnSearch" type="button">Lookup</button>
</span>
</div>
</div>
@ -371,7 +232,7 @@
<div class="col-md-4">
<div class="mb-4">
<div class="form-floating">
<input type="text" class="form-control" placeholder="Address 1" asp-for="address">
<input type="text" class="form-control" placeholder="Address 1" asp-for="address">
<label for="address">Address 1</label>
</div>
</div>
@ -392,73 +253,12 @@
</div>
</div>
</div>
<div class="col-md-4">
<div class="mb-4">
<div class="form-floating">
<input type="number" class="form-control" asp-for="telNo" id="Mobile" placeholder="Address 2">
<label for="Mobile">Telephone (optional)</label>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="card bg-light border-0 mb-4">
<div class="card-body">
<div class="row">
<div class="col-lg-12">
<h5 class="mb-4">Other Details</h5>
</div>
<div class="col-md-4">
<div class="mb-4">
<div class="form-floating">
<select class="form-select" asp-for="occupation" asp-items="@CustomerOnlineV2.Helper.HelperClass.GetDropdownData("getOccuptttion", true)">
@* <option selected></option>
<option value="Retired">Retired</option>
<option value="Security Officer">Security Officer</option>
<option value="Unemployed">Unemployed</option>
<option value="Others">Others</option> *@
</select>
<label for="Occupation">Occupation</label>
</div>
</div>
</div>
<div class="col-md-4">
<div class="mb-4">
<div class="form-floating">
<select class="form-select" asp-for="sourceOfFound" asp-items="@CustomerOnlineV2.Helper.HelperClass.GetDropdownData("getSourceOfFound", true)">
@* <option selected></option>
<option value="Business Income">Business Income</option>
<option value="Investment">Investment</option>
<option value="Loan">Loan</option>
<option value="Others">Others</option>
<option value="Salary">Salary</option>
<option value="Sale of Property">Sale of Property</option>
<option value="Others">Others</option> *@
</select>
<label for="Occupation">Source Of Income</label>
</div>
</div>
</div>
<div class="col-md-8">
<div class="mb-4">
<div class="form-floating">
<select class="form-select" id="AboutUS" >
<option selected></option>
<option value="Facebook/Social Media">Facebook/Social Media</option>
<option value="Family or Friend">Family or Friend</option>
<option value="Google Search/Website">Google Search/Website</option>
<option value="Nepalese Organization">Nepalese Organization</option>
<option value="Nepali Events/Newspaper">Nepali Events/Newspaper</option>
<option value="Refer A Friend">Refer A Friend</option>
</select>
<label for="AboutUS">How did you hear about us?</label>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="row">
<div class="col-md-12">
<div class="mb-4">
@ -546,27 +346,7 @@
<script type="text/javascript">
// $(document).ready(function () {
// $('#Customer-form').submit(function (e) {
// e.preventDefault(); // Prevent form submission for now
// validatePasswords();
// });
// $('#password, #confirmPassword').on('keyup', function () {
// validatePasswords();
// });
// function validatePasswords() {
// var password = $('#password').val();
// var confirmPassword = $('#confirmPassword').val();
// if (password !== confirmPassword) {
// $('#confirmPassword').get(0).setCustomValidity('Passwords do not match');
// } else {
// $('#confirmPassword').get(0).setCustomValidity('');
// }
// }
// });
$(document).ready(function () {
@ -651,7 +431,7 @@ $(document).ready(function () {
if (passwordRegex.test(password)) {
passwordValidation.text("Valid password").css("color", "green");
} else {
passwordValidation.text("Password should contain at least one special character (*&%$), one uppercase, one lowercase and min of 8 characters").css("color", "red");
passwordValidation.text("Password should contain at least one special character (*&%$), one uppercase, one lowercase and min of 8 characters").css("color", "green");
}
});
@ -662,7 +442,7 @@ $(document).ready(function () {
if (password === confirmPassword) {
confirmPasswordValidation.text("Passwords match").css("color", "green");
} else {
confirmPasswordValidation.text("Passwords do not match").css("color", "red");
confirmPasswordValidation.text("Passwords do not match").css("color", "green");
}
});
});

Loading…
Cancel
Save