Javascript alerts not coming up

userfhU11 0
Viewed 50

I am trying to validate the first name and last name fields and if they are not at least 3 characters long, to send an alert. If both the first name and last name are not at least 3 characters, I want an alert for that as well if one or the other does not have at least 3 characters. I have tried separating the functions but they won't be together in one alert. Thank you!

<!DOCTYPE html>
<html lang="en">
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">

<head>
<link rel="stylesheet" href="style.css">
<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=Concert+One&family=Orbitron&display=swap" rel="stylesheet">
<title>Kate's Kars</title>
<link rel="icon" type="image/x-icon" href="logo.ico">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js">. 
</script>
<link rel="stylesheet" 
href
="https://ajax.googleapis.com/ajax/libs/jquerymobile/1.4.5/jquery.mobile.min.css">
<script src="filename" type="text/javascript">
</script>
<link href="css/jquery-ui.min.ss" rel="stylesheet">
<script src="js/jquery-ui.min.js"></script>
</head>

<body>
<div class="Background">
    <div class="Logo">
        <a href="index.html">
            <img src="logo.png" alt="Kate's Kars Logo"></a>
    </div>
    <div class="Black">
        <div class="topNav">
            <nav>
                <div class="nav-links">
                    <ul>
                        <li><a href="index.html">HOME</a></li>
                        <li><a href="PinkPorscheDetails.html">PINK PORSCHE</a></li>
                        <li><a href="PinkAudiDetails.html">PINK AUDI </a></li>
                        <li><a href="PinkBMWDetails.html">PINK BMW</a></li>
                        <li><a href="RegistrationPage.html">REGISTER HERE BITCH</a>. 
     </li>
                    </ul>
                </div>
            </nav>
        </div>
        <div class="RegistrationName1">
            <h1>FILL OUT THIS FORM TO REGISTER</h1>
            <form name="form1">
                <ul>
                    <li>FIRST NAME:<input type='text' name='text1' /></li>
                    <li>LAST NAME:<input type='text' name='text2' /></li>
            </form>
            </ul>
        </div>
        <script>
            function stringlength(inputtxt1, minlength1, maxlength1, 
 inputtxt2,minlength2,maxlength2);
 { 
 var field1 = inputtxt.value1; 
 var mnlen1 = minlength1;
 var mxlen1 = maxlength1;
 var field2 = inputtxt.value2; 
 var mnlen2 = minlength2;
 var mxlen2 = maxlength2;


 if(field1.length<mnlen1 || field1.length>mxlen1)
 { 
 alert("First name must be 3 characters or more");
 return false;
 }else if(field2.length<mlen2 || field2.length>mxlen2){
 alert("Last name must be 3 characters or more");
 return false;
 }
 else if((field1.length<mnlen1 || field1.length>mxlen1) && (field2.length<mlen2 || 
 field2.length>mxlen2)){
 alert("First name must be 3 characters or more\nLast name must be 3 characters or 
 more");
 return false;
 }else if{
 return true:
 }
 }

 </script>
        <div class="OverTheAge">
            <input type="checkbox" id="overtheage" name="age" value="18" required>
            <label for="age"> I am 18 years or older</label><br>
        </div>
        <div class="DropDown">
            <p>SELECT YOUR SLUTTY STATE</p>
            <select required>
                <option value="">None</option>
                <option>---STATE---</option>
                <option>Rhode Island</option>
                <option>Maine</option>
                <option>California</option>
            </select>
        </div>
        <div class="RadioButtons">
            <p>CHOOSE YOUR FAVORITE COLOR</p>
            <input type="radio" name="favcolor" id="pink" value="PINK" required>
            <label for="pink">PINK</label><br>
            <input type="radio" name="favcolor" id="green" value="GREEN">
            <label for="green">GREEN</label><br>
            <input type="radio" name="favcolor" id="blue" value="BLUE">
            <label for="blue">BLUE</label><br>
        </div>
        <input type="submit" name="submit" value="Submit" 


 onclick=
"audio.play()&&stringlength1(document.form1.text1,3,25,document.form1.text2,3,25);" 
/>
        <script type="text/javascript">
        const audio = new Audio();
        audio.src = "./likeyou.mp3";
        </script>
        </form>
    </div>
    <footer id="footer">&copy; Copyright 2022 Kate's Kars
        <p>
            <a href="http://jigsaw.w3.org/css-validator/check/referer">
                <img style="border:0;width:88px;height:31px" 
 src="http://jigsaw.w3.org/css-validator/images/vcss-blue" alt="Valid CSS!" />
            </a>
        </p>
    </footer>
    </script>
 </div>
  </body>

 </html>
alerts javascript html
1 Answers

some minor problems but mostly typos

function stringlength(inputtxt1, minlength1, maxlength1,
  inputtxt2, minlength2, maxlength2) {
  var field1 = inputtxt1;
  var mnlen1 = minlength1;
  var mxlen1 = maxlength1;
  var field2 = inputtxt2;
  var mnlen2 = minlength2;
  var mxlen2 = maxlength2;
  
  console.log(field1,mnlen1,mxlen1)

  if (field1.length < mnlen1 || field1.length > mxlen1) {
    alert("First name must be 3 characters or more");
    return false;
  } else if (field2.length < mnlen2 || field2.length > mxlen2) {
    alert("Last name must be 3 characters or more");
    return false;
  } else if ((field1.length < mnlen1 || field1.length > mxlen1) && (field2.length < mnlen2 ||
      field2.length > mxlen2)) {
    alert("First name must be 3 characters or more\nLast name must be 3 characters or  more ");
      return false;
    }
    else {
      return true;
    }
  }
  stringlength("ts",3,5,"tccs",3,5)

DCR0
Related