I want the form to validate the custom made captcha

I have a set of 10 captcha images in jpg format.All i am remaining to do is to validate if the user input is correct as the captcha text. Below is the complete code for a custom captcha with custom made animated text characters:

Login Page

Captcha System

<span class="navbar-toggler-icon"></span>

<ul class="navbar-nav mr-auto">

  <li class="nav-item active">

    <a class="nav-link" href="#">Home <span class="sr-only">(current)</span></a>

  </li>

  <li class="nav-item">

    <a class="nav-link" href="#">Catogeries</a>

  </li>

  <li class="nav-item dropdown">

    <a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">

      Authors

    </a>

    <div class="dropdown-menu" aria-labelledby="navbarDropdown">

      <a class="dropdown-item" href="#">Blogs</a>

      <a class="dropdown-item" href="#">Development</a>

      <div class="dropdown-divider"></div>

      <a class="dropdown-item" href="#">Business</a>

    </div>

  </li>

  <li class="nav-item">

    <a class="nav-link disabled" href="#" tabindex="-1" aria-disabled="true">Disabled</a>

  </li>

</ul>

<form class="form-inline my-2 my-lg-0">

  <input class="form-control mr-sm-2" type="search" placeholder="Search" aria-label="Search">

  <button class="btn btn-outline-success my-2 my-sm-0" type="submit">Search</button>

</form>

<div style="width: 40%; margin: 25px auto;">

<h3 style="text-align: center;">Login Page</h3>

<form method="POST" action="">

  <div class="form-group">

    <label>UserName:</label><input type="text" name="UserName" class="form-control" autofocus placeholder="username">

  </div>

  <div class="form-group">

    <label>Password:</label><input type="Password" name="Password" class="form-control" autofocus placeholder="Password">

  </div>



  <label>Enter Captcha:</label>

  <img src= imageArray  onclick="generateRandomPicture()" width="195" height="100" id="capt">

  <div class="form-row">

    <div class="form-group col-md-6">

   </div>

    <div class="form-group col-md-8">



      <input type="text" class="form-control" id="textinput">

    </div>

  </div>

    <button onclick="validcap()" class="btn btn-lg btn-success btn-block">Submit</button>

  </div>

</form>



<h6>Captcha not visible <img src="refresh.jpg" width="30px" onclick="generateRandomPicture(imageArray)"></h6>

<p>New Here?<a href="">Sign Up</a> </p>

<p>Forgotten Password?<a href="">Recover here</a> </p>

const imageArray = [{

src:”https://lh3.googleusercontent.com/O9OkhSZgJ9P0XTN_w63i9UlT3_pzr703tGPGLpaCmAOte4W4T5vOVqnSUYugMyjLgi39wq0=s170″,name:”MCABJ”},

“https://lh3.googleusercontent.com/k5hld8V0gDuzbXYlROE0TDvCb8lJ-2a1CBT41x6EG50_DW_wtf6ma5uVerWdI-oHDqmTVw=s160”,

“https://lh3.googleusercontent.com/BDW21nm1NoPUV_X33Q8mtHktuqwblbu46_oSWrHmCyW2OBlbR0d0QwYrER8VRXtrhTEBiw=s170”,

“https://lh3.googleusercontent.com/Zr71njboeq8BRXsBkQeegDaBUDGwvpbaDDs7gSST2MEkn00lTo_EvVVdU01w41Ed8NphC5g=s170”,

“https://lh3.googleusercontent.com/eSQry20u69Xr7urTZjXNT31dUVV6xGTsZqRCo1r-bqtQaT_FVJ2m3WNYnxPvidS4lpvG=s170”,

“https://lh3.googleusercontent.com/zbyXqv38dV6A1WZrnXgRr0lLZ0KX4PHK1Yph3t9bndR1zfGrC1LqYpMO8bXkg9R3x1s6VQ=s170”,

“https://lh3.googleusercontent.com/yniDGYeKA7HhOYcmIuc1Yv8TzgFDnIGL4jahYcMaRQ3kvyHpYoUtSKtTkpffZrJRsk5H=s170”,

“https://lh3.googleusercontent.com/6tnVYghNVLC7_rZcf-Gr2cyDGffo3ETZ2wPU_Isj0jkrhIMT7RZyryB1XIT8JpXP_er6DA4=s170”,

“https://lh3.googleusercontent.com/vLacveGYUzwMvjdclxYPvyhc21dG6O4WPujz75DMorawxg8Y8oUY2t4S1n6ATeKpvlU4PZ4=s170”,

“https://lh3.googleusercontent.com/qicMuzLUCIIM35DX0GWEJpqiYBzzjNUdOV3xrB9CCe5K0s5xEua1rgFX7FWJ07zdsd-D=s170”

];

const image = document.querySelector(“img”);

const button = document.querySelector(“button”);

window.onload = () => generateRandomPicture(imageArray);

button.addEventListener(“click”, () => generateRandomPicture(imageArray));

function generateRandomPicture(array){

let randomNum = Math.floor(Math.random() * array.length);

image.setAttribute(“src”, array[randomNum]);

if(image.setAttribute(“src”, array[randomNum])==”https://lh3.googleusercontent.com/O9OkhSZgJ9P0XTN_w63i9UlT3_pzr703tGPGLpaCmAOte4W4T5vOVqnSUYugMyjLgi39wq0=s170″)

stg1=”MCABJ”

}

/*

function validcap(){

var stg2 = document.getElementById(‘textinput’).value;

if(stg1==stg2){

alert(“Form is validated Succesfully”);

return true;

}else{

alert(“Please enter a valid captcha”);

return false;

}

*/

Please tell how can i assign a value to each image and validate by comparing to user input.