1. app/admin/app_users.rb
form do |f|
render 'form', context: self, f: f
end
-------------------------------------------------------
2. IN Active admin side : app/views/admin/users/_form.html.erb
<% context.instance_eval do
semantic_form_for resource, url: admin_users_path do
# f.semantic_errors *f.object.errors.keys
f.inputs 'Details' do
f.input :first_name, required: true, :as => :string, label: "Name"
f.input :full_phone_number, input_html: {maxlength: 12, onkeypress: "return onlyNumberKey(event)"}, required: true
f.input :email, required: true
f.input :user_name, required: true
f.input :activated, label: "Activate",input_html: {checked: true}
f.input :role, as: :select, collection: BxBlockRolesPermissions::Role.all, include_blank: false, :input_html => { :width => 'auto', "data-placeholder" => 'Click' }
f.input :password, label: "Password",:input_html => {id: "account_password"}, required: true
f.hidden_field :temporary_password
end
f.inputs 'Organization Profile' do
f.semantic_fields_for :profile do |s|
s.input :name, label: "Organization name"
s.input :business_location
s.input :address
s.input :email
s.input :contact_no
s.input :license_no
s.input :fiscal_year
s.input :city
s.input :state
s.input :pin_code
s.input :website_url
s.input :fax_no
s.input :profile_pic, as: :file
end
end
f.actions
end
end
%>
<script type="text/javascript">
$('#account_password').after("<label class='password_show_hided' onclick='password_show_hide();'><i class='fas fa-eye' id='hide_eye'></i><i class='fas fa-eye-slash' id='show_eye' style='display: none;'></i></label>");
function onlyNumberKey(evt) {
var ASCIICode = (evt.which) ? evt.which : evt.keyCode
if (ASCIICode > 31 && (ASCIICode < 48 || ASCIICode > 57))
return false;
return true;
}
$(document).ready(function() {
jQuery.validator.addMethod("lettersonly", function(value, element) {
return this.optional(element) || value.match(/^[a-zA-Z]+$/);
});
jQuery.validator.addMethod("fullPhoneNo", function(phone_number, element) {
phone_number = phone_number.replace(/\s+/g, "");
return this.optional(element) || phone_number.length == 12 &&
phone_number.match(/^((\+[1-9]{1,4}[ \-]*)|(\([0-9]{2,3}\)[ \-]*)|([0-9]{2,4})[ \-]*)*?[0-9]{3,4}?[ \-]*[0-9]{3,4}?$/);
});
jQuery.validator.addMethod("checkEmail", function(value, element) {
return this.optional(element) || value.trim().match(/^(([^<>()\[\]\\.,;:\s@"']+(\.[^<>()\[\]\\.,;:\s@"']+)*)|(".+"))@((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\])|(([a-zA-Z\-0-9]+\.)+[a-zA-Z]{2,}))$/);
});
jQuery.validator.addMethod("checkUsername", function(value, element) {
return this.optional(element) || value.match(/^[A-Za-z0-9]*$/);
});
jQuery.validator.addMethod("checkPassword", function(value, element) {
return this.optional(element) || value.match(/^(?=.*[A-Z])(?=.*[#!@$&*?<>',\[\]}{=\-)(^%`~+.:;_])(?=.*[0-9])(?=.*[a-z]).{8,}$/);
});
$("#new_account").validate({
rules:{
'account[first_name]':
{
required: true,
minlength: 3,
lettersonly: true
},
'account[full_phone_number]':
{
required: true,
fullPhoneNo: true,
minlength: 12,
maxlength: 12
},
'account[email]':
{
required: true,
checkEmail: true
},
'account[user_name]':
{
required: true,
checkUsername: true
},
'account[password]':
{
required: true,
checkPassword: true
},
},messages:{
'account[first_name]':{
required: "<p class='inline-errors'>Please enter first name</p>",
minlength: "<p class='inline-errors'>Please enter valid first name</p>",
lettersonly: "<p class='inline-errors'>Please enter valid first name</p>"
},
'account[full_phone_number]':{
required: "<p class='inline-errors'> Please enter mobile number</p>",
fullPhoneNo: "<p class='inline-errors'>Please enter valid mobile number</p>",
minlength: "<p class='inline-errors'>Please enter valid mobile number</p>",
maxlength: "<p class='inline-errors'>Please enter valid mobile number</p>"
},
'account[email]':{
required: "<p class='inline-errors'>Please enter email id</p>",
checkEmail: "<p class='inline-errors'>Please enter a valid email address.</p>"
},
'account[user_name]':{
required: "<p class='inline-errors'>Please enter user name</p>",
checkUsername: "<p class='inline-errors'>Please enter valid user name</p>"
},
'account[password]':{
required: "<p class='inline-errors'>Please enter password</p>",
checkPassword: "<p class='inline-errors'>Please enter a valid password (ex: Aa@12345, min. length 8)</p>"
}
}
});
$("#edit_account").validate({
rules:{
'account[first_name]':
{
required: true,
minlength: 3,
lettersonly: true
},
'account[full_phone_number]':
{
required: true,
fullPhoneNo: true,
minlength: 12,
maxlength: 12
},
'account[email]':
{
required: true,
checkEmail: true
},
'account[user_name]':
{
required: true,
checkUsername: true
},
'account[password]':
{
checkPassword: true
},
},messages:{
'account[first_name]':{
required: "<p class='inline-errors'>Please enter first name</p>",
minlength: "<p class='inline-errors'>Pleaseee enter valid first name</p>",
lettersonly: "<p class='inline-errors'>Please enter valid first name</p>"
},
'account[full_phone_number]':{
required: "<p class='inline-errors'> Please enter mobile number</p>",
fullPhoneNo: "<p class='inline-errors'>Please enter valid mobile number</p>",
minlength: "<p class='inline-errors'>Please enter valid mobile number</p>",
maxlength: "<p class='inline-errors'>Please enter valid mobile number</p>"
},
'account[email]':{
required: "<p class='inline-errors'>Please enter email id</p>",
checkEmail: "<p class='inline-errors'>Please enter a valid email address.</p>"
},
'account[user_name]':{
required: "<p class='inline-errors'>Please enter user name</p>",
checkUsername: "<p class='inline-errors'>Please enter valid user name</p>"
},
'account[password]':{
checkPassword: "<p class='inline-errors'>Please enter a valid password (ex: Aa@12345, min. length 8)</p>"
}
}
});
});
function password_show_hide() {
var x = document.getElementById("account_password");
var show_eye = document.getElementById("show_eye");
var hide_eye = document.getElementById("hide_eye");
// hide_eye.classList.remove("d-none");
if (x.type === "password") {
x.type = "text";
show_eye.style.display = "block";
hide_eye.style.display = "none";
} else {
x.type = "password";
show_eye.style.display = "none";
hide_eye.style.display = "block";
}
}
$('#account_password').keyup(function() {
var password = this.value;
$("#account_temporary_password").val(password);
});
</script>
<style type="text/css">
#account_first_name-error, #account_last_name-error, #account_full_phone_number-error, #account_user_name-error {
width: 100% !important;
padding-bottom: 12px !important;
}
#account_password-error {
width: 100% !important;
}
#account_email_input #account_email-error{
width: 100% !important;
padding-bottom: 12px !important;
color: #932419;
font-weight: bold;
margin: 0.3em 0 0 20%;
}
#account_email_input #account_email-error p.inline-errors{
margin: auto !important;
}
.password_show_hided{
font-weight: bold;
margin: -1.9em 0 0 91%;
width: 22px;
cursor: pointer;
position: absolute;
text-align: center;
}
.fas{
line-height: unset !important;
}
@media only screen and (max-width: 1060px) {
.password_show_hided{
margin: -1.9em 0 0 90%;
}
}
@media only screen and (max-width: 958px) {
.password_show_hided{
margin: -1.9em 0 0 89%;
}
}
@media only screen and (max-width: 444px) {
.password_show_hided{
margin: -1.9em 0 0 72%;
}
}
</style>
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.7.2/css/all.css" integrity="sha384-fnmOCqbTlWIlj8LyTjo7mOUStjsKC4pOpQbqyi7RrhN7udi9RwhKkMHpvLbHG9Sr" crossorigin="anonymous" />
