I am getting an error "Refused to execute script from 'https://emortech.pages.dev/mai emortech.pages.dev/:1n.js' because its MIME type ('text/html') is not executable, and strict MIME type checking is enabled." when I am trying running this deployed page on cloudflare. But when I am running this page on my localhost this error is not coming. Due to this error, the form is not working properly. I have also added type="text/javascript" at the script tag in index.html.
Code for tag in index.html
<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">
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Poppins:wght@600;700&display=swap" rel="stylesheet">
<script src="https://cdn.tailwindcss.com"></script>
<script href="./style.css" rel="stylesheet"></script>
<script type="text/javascript" src="./main.js"></script>
<title>Emortech</title>
</head>
Code of Form Tag in index.html
<div class="w-[20vw] z-10" id="formContainer">
<h1 class="text-4xl font-bold font-poppins" id="formTitle">Password Reset</h1><br>
<form class="tracking-wider font-semibold" id="form" onsubmit="return validatePassword();">
<label for="fname">NEW PASSWORD</label><br>
<input type="password" id="newpass" name="newpass" class="h-9 border-black border-2 w-[100%] my-3">
<label for="lname">RE-ENTER PASSWORD</label><br>
<input type="password" id="renewpass" name="renewpass"
class="h-9 border-black border-2 w-[100%] my-3"><br>
<div id="response" class="text-red-500 italic text-xs"></div><br>
<button type="submit" class="tracking-wide font-bold w-[100%] h-11 text-white bg-black rounded-lg font-poppins">
RESET PASSWORD
</button>
</form>
Code of main.js
function validatePassword() {
const pass = document.getElementById("newpass")
const cpass = document.getElementById("renewpass")
const pattern = /\d/g;
if (pass.value != "" && cpass.value != "") {
if(pass.value.length < 8){
document.getElementById("response").innerHTML = "Password must contain 8 characters"
return false;
} else if(!pattern.test(pass.value)) {
if (pass.value === cpass.value) {
document.getElementById("formTitle").innerText = "Password Changed"
document.getElementById("form").innerHTML = `<p class="text-sm">Your password has been updated! Now get back in the driver seat, racers are waiting for you!</p><br><button type = "submit" class="tracking-wide font-poppins font-bold w-[100%] h-11 text-white bg-black rounded-lg" >JOIN A RACE</button >`
return false;
} else {
document.getElementById("response").innerHTML = "Passwords do not match"
pass.className = pass.className + " border-red-400 border-2"
cpass.className = cpass.className + " border-red-400 border-2"
return false;
}
} else {
document.getElementById("response").innerHTML = "Password must contain only letters"
return false;
}
} else {
document.getElementById("response").innerHTML = "All fields are required"
pass.className = pass.className + " border-red-400 border-2"
cpass.className = cpass.className + " border-red-400 border-2"
return false;
}
}
Now this is the screenshot when I am running this code on localhost:3000
No such error is coming and the form functionality is working fine. You can see a red font giving the desired output
Now when I run this same script deployed on cloudflare pages it given an error in the console and when I try to add values to input and submit the form an uncaught error occur and the page reloads
