Input field fixed in registation page that only accept image type

RAHUL956777 · Oct 2, 2023 · 5acbea3 · 5acbea3
1 parent c9c7510
commit 5acbea3
Show file tree

Hide file tree

Showing 2 changed files with 30 additions and 20 deletions.
diff --git a/UI/Register.html b/UI/Register.html
@@ -59,7 +59,7 @@ <h2>Sign Up</h2>
 
                 <div class="profile-img">
                     <div class="file-upload">
-                        <input type="file"  name="image" id="image" class="file-input" required oninvalid="this.setCustomValidity('Select an Profile Image')" oninput="this.setCustomValidity('')">
+                        <input type="file"  name="image" id="image" accept=" image/jpeg, image/png, image/jpg, image/svg " class="file-input" required oninvalid="this.setCustomValidity('Select an Profile Image')" oninput="this.setCustomValidity('')">
                         <i class="fas fa-user-edit"></i>
                     </div>
                 </div>

diff --git a/UI/Register.js b/UI/Register.js
@@ -1,33 +1,43 @@
 const form = document.querySelector('.form form'),
-submitbtn = form.querySelector('.submit input'),
-errortxt = form.querySelector('.error-text');
-let fname= document.getElementById("fname");
-let lname= document.getElementById("lname");
-let email= document.getElementById("email");
-let image= document.getElementById("image");
-let phone= document.getElementById("phone");
-let password= document.getElementById("password");
-let cpassword= document.getElementById("cpassword");
+    submitbtn = form.querySelector('.submit input'),
+    errortxt = form.querySelector('.error-text');
+let fname = document.getElementById("fname");
+let lname = document.getElementById("lname");
+let email = document.getElementById("email");
+let image = document.getElementById("image");
+let phone = document.getElementById("phone");
+let password = document.getElementById("password");
+let cpassword = document.getElementById("cpassword");
 form.onsubmit = (e) => {
     e.preventDefault();
 }
+$('#image').on("change", function (value) {
 
-submitbtn.onclick = () =>{
+    var fileExtension = ['jpeg', 'jpg', 'png', '.svg'];
+    if ($.inArray($(this).val().split('.').pop().toLowerCase(), fileExtension) == -1) {
+        alert("Only '.jpeg','.jpg', '.png' '.svg' formats are allowed.");
+        image.value = []
+    } else {
+        console.log($(this).val())
+        image.value = $(this).val()
+    }
+})
+
+
+submitbtn.onclick = () => {
     //if we buy domain then remove this
-    if(fname.value.length>0 && lname.value.length>0 && email.value.length>0 && image.value.length>0 && phone.value.length>0 && password.value.length>0 && cpassword.value.length>0){
-        if(password.value == cpassword.value){
+    if (fname.value.length > 0 && lname.value.length > 0 && email.value.length > 0 && image.value.length > 0 && phone.value.length > 0 && password.value.length > 0 && cpassword.value.length > 0) {
+        if (password.value == cpassword.value) {
             alert("Registration Successfull");
-            location.href="../indexafter.html";
+            location.href = "../indexafter.html";
         }
-        else
-        {
+        else {
             alert("Passwords are not matching please check");
         }
     }
-    else
-        {
-            alert("All field are required");
-        }
+    else {
+        alert("All field are required");
+    }
     //--------
     /*let xhr = new XMLHttpRequest();    
     xhr.open("POST","./UI/Register.php",true);