<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Register</title>
</head>
<body>
<h3>Register</h3>

<form action="#" method="post" enctype="multipart/form-data">
    Name:<input type="text" name="user_name" placeholder="Enter Name" pattern="^[A-Za-z -]+$"  title="Please Enter Only Characters" minlength="3" required>
    <br><br>
    Email:<input type="email" name="user_email" placeholder="Enter Email" required>
    <br><br>
    Mobile:<input type="text" maxlength="10" name="user_mobile" minlength="10" pattern="[0-9]{10}" title="please enter valid Mobile Number"  name="user_mobile" placeholder="Enter Mobile No" required>
    <br><br>
    Semester:<select name="user_sem" required>
        <option value="">Select</option>
        <option value="Sem 1">Sem 1</option>
        <option value="Sem 2">Sem 2</option>
        <option value="Sem 3">Sem 3</option>

    </select>
    <br><br>
    Gender:
    Male:<input type="radio" name="gender" value="Male" required>
    Female:<input type="radio" name="gender" value="Female">   
    <br><br>
    Image:<input type="file" name="file"  accept="image/*"  required>
    
    <br><br>
    
    Website URL:<input type="url" name="website" placeholder="Enter Website URL" required>
    <br><br>
    Message:<textarea name="message" placeholder="Enter Message" required></textarea>
    <br><br>
    Password:<input type="password" maxlength="8" minlength="6" id="password"  name="user_password" placeholder="Enter Password" required>
    <br><br>
    Confirm Password:<input type="password" maxlength="8" minlength="6" id="confirm_password"  name="confirm_password" placeholder="Enter Confirm Password" required>
    <br><br>
    I Agree Terms & Coditions<input type="checkbox" id="term" name="term" required>
    <br><br>
    <input type="submit" value="Submit">
</form>
    
<script>
    var password = document.getElementById("password")
  , confirm_password = document.getElementById("confirm_password");

function validatePassword(){
  if(password.value != confirm_password.value) {
    confirm_password.setCustomValidity("Password Don't Match");
  } else {
    confirm_password.setCustomValidity('');
  }
}

password.onchange = validatePassword;
confirm_password.onkeyup = validatePassword;
    </script>
</body>
</html>