Forms
Validation
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Sports Management System</title>
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet"
integrity="sha384-9ndCyUaIbzAi2FUVXJi0CjmCapSmO7SnpJef0486qhLnuZ2cdeRhO02iuK6FUUVM" crossorigin="anonymous">
<link rel="stylesheet" href="{{ asset('assets/style/circle.css') }}">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css"
integrity="sha512-iecdLmaskl7CVkqkXNQ/ZH/XLlvWZOJyj7Yy7tcenmpD1ypASozpmT/E0iPtmFIB46ZmdtAc9eNBvH0H/ZpiBw=="
crossorigin="anonymous" referrerpolicy="no-referrer" />
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
</head>
<body>
<form action="" method="post" id="registerform" method="post" enctype="multipart/form-data">
@csrf
<section class="h-100 bg-dark">
<div class="container py-5 h-100">
<div class="row d-flex justify-content-center align-items-center h-100">
<div class="col">
<div class="card card-registration my-4">
<div class="row g-0">
<div class="col-xl-6 d-none d-xl-block">
<img src="{{ asset('assets/reg.jpg') }}" alt="Sample photo" class="img-fluid"
style="border-top-left-radius: .25rem; border-bottom-left-radius: .25rem;width:100%;" />
</div>
<div class="col-xl-6">
<div class="card-body p-md-5 text-black">
<h3 class="mb-5 text-uppercase d-flex justify-content-center"> registration form
</h3>
<div class="upload mb-3">
<img class="rounded-circle" src="{{ asset('assets/av.jpg') }}" width=100
height=100 alt="">
<div class="round">
<input type="file">
<i class="fa fa-camera" style="color:#fff;"></i>
</div>
</div>
<div class="row">
<div class="col-md-10 mb-4">
<div class="form-outline">
<input type="text" id="name"
class="form-control form-control-lg" name="name" />
<label class="form-label" for="name">First name</label>
</div>
</div>
</div>
<div class="row">
<div class="col-md-10 mb-4">
<div class="form-outline">
<input type="text" id="email"
class="form-control form-control-lg" name="email" />
<label class="form-label" for="email">Email</label>
</div>
</div>
</div>
<div class="row">
<div class="col-md-10 mb-4">
<div class="form-outline ">
<input type="password" id="password"
class="form-control form-control-lg" name="password" />
<label class="form-label" for="password">Password</label>
</div>
</div>
</div>
<section id="otp-input">
<div class="row">
<div class="col-md-10 mb-4">
<div class="form-outline ">
<input type="number" id="otp"
class="form-control form-control-lg" />
<label class="form-label" for="otp">Otp</label>
</div>
</div>
</div>
</section>
<section id="applicationformotp">
<div class="d-flex justify-content-center mx-4 mb-3 mb-lg-4">
<button type="submit" class="btn btn-primary btn-lg"
id="showButton">Send
Otp</button>
</div>
</section>
<section id="applicationform">
<div class="d-flex justify-content-center pt-2 mb-3">
<button type="button" class="btn btn-primary btn-lg ms-2">Register
</button>
</div>
</section>
<div class="d-flex justify-content-center mx-4 mb-3 mb-lg-4 mx-auto">
<a href="{{ route('home') }}" class="btn btn-secondary btn-lg">Back</a>
</div>
<div class="d-flex justify-content-center mx-4 mb-3 mb-lg-4">
<a href="/login" class="text-decoration-none ">Already have an account? Log
In</a>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</section>
</form>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.4/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.9.1/gsap.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js"
integrity="sha384-geWF76RCwLtnZ8qwWowPQNguL3RmwHVBC9FhGdlKrxdiJJigb/j/68SIy3Te4Bkz" crossorigin="anonymous">
</script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-validate/1.19.2/jquery.validate.min.js"></script>
<script>
$(document).ready(function() {
$("#otp-input").hide();
$("#applicationform").hide();
$("#showButton").click(function() {
$("#applicationform").show();
// $("#register").hide();
$("#otp-input").show();
$("#applicationformotp").hide();
});
});
</script>
<script>
$(document).ready(function() {
$("#showButton").click(function() {
// Make the ajax call
var email = document.getElementById('email').value;
console.log(email);
console.log('test');
$.ajax({
url: '{{ route('Otp.send') }}',
type: 'post',
data: {
'email': email,
"_token": '{{ csrf_token() }}',
},
success: function(response) {
$('#registerform').html(response.data);
}
});
});
});
</script>
</body>
</html>
Last updated
by
@tvbeek
1 year ago.
moderator
Hello @shubii8760
You post a long view, and give the title how to validate this form. My first question is what did you try and where did you get stuck?
Ps. I have updated your post to give one compleet code block.
- I want to register user through email an otp send to his email and then it will verified . 2)and i am hiding fields in this form like otp input filed and the button to verify user and register. 3)So when user fill this and clicked on send otp button hidden fields will show 4)My question is that how to validate this form I try jquery validation but that validation is not working
Sign in to participate in this thread!
Laravel
Laravel News
Laracasts
Laravel Podcast