valid & invalid

جامعه‌ها وبلاگ شروع یادگیری برنامه نویسی

سلام وقت بخیر . من سودو کلاس valid و invalid را که اعمل میکنم و میگم که عنصر موردنظر تغییر رنگ بردر بدهد ، در حالت معمولی خب نباید رنگ بردر را تغییر بدهد و اگر درست یا اشتباه بود میبایست برای من آن را به نمایش در بیاورد اما در حالت معمولی حالت valid را برای من اعمال می‌کند نمیدونم چرا ؟؟ همین رنگ سبز بردر را میگم . که رنگ اصلی آن سفید هست و در حالت معمولی باید همون رنگ سفید را برای من نمایش بدهد ... f493-Screenshot (116).png

سلام،

valid یا invalid بودن input هارو باید با اتربیوت هایی مثل required, pattern, min, minlength, .... مشخص کنید.

آیا این صفت هارو مشخص کردید و بازهم اشتباه نمایش داده میشه؟

کدتون رو روی codepen یا jsfiddle قرار بدید.

محسن موحد ۱۱ مرداد ۱۴۰۲، ۲۰:۰۶

بله آن موارد را هم قرار دادم . میخوام در حالت معمولی بدون تغییر رنگ بردر اینپوت را نمایش بده و اگر خطا داشت و یا صحیح بود تغییر رنگ بده ...

html>
<html lang="en" dir="ltr">
  <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="stylesheet" href="assets/css/styles.css">
    <title>title>
<style>
.form-2{
    background-color: #0c1d7d2e;
    width: 700px;
    margin: auto;
    padding: 20px;
}
.form-2 form{
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    
}
.form-2 form input{
    width: 50%;
    height: 30px;
    border: 1px solid #ffffff;
    outline: none;
    border-radius: 20px;
    margin-bottom: 10px;
    padding: 0 15px;
    color: black;
}
.form-2 form input:valid{
    border: 1px solid #0eb405;
    
}
.form-2 form input:invalid{
    border: 1px solid #d53333;
    
}
.form-2 form label{
    margin-bottom: 10px;
    display: block;
    font-family: font-4;
}
.form-2 form button{
    padding: 5px 30px 8px;
    font-size: 14px;
    margin-top: 20px;
    cursor: pointer;
    border: none;
    background-color: rgb(1, 125, 178);
    border-radius: 6px;
    color: white;
    font-family: font1;
}
style>
  head>
  <body>
      <div class="form-2">
        <form action="">
          <label for="">نامlabel>
          <input type="text" name="" id="" pattern="[A-Za-z0-9]{8,12}" required>
          <label for="">رمز عبورlabel>
          <input type="password" name="" id="" pattern="[A-Za-z0-9]{8,12}" required>
  
          <button>ورودbutton>
        form>
      div> 		
    
    <script
      src="https://code.jquery.com/jquery-3.7.0.min.js"
      integrity="sha256-2Pmvv0kuTBOenSvLm6bvfBSSHrUJ+3A7x6P5Ebd07/g="
      crossorigin="anonymous"
    >script>
    <script src="assets/js/main.js">script>
  body>
html>

علی نبی زاده ۱۲ مرداد ۱۴۰۲، ۰۹:۳۶

سلوشن بهتر برای پیاده سازی چنین سناریویی با جاوااسکریپت و کتابخونه هاش است تا کنترل بهتری داشته باشید ولی با css هم میتونید از راه هایی استفاده کنید یکی اینه برای تگ هاتون placeholder بذارید و استایلی برای زمانیکه اینپوت روی placeholder قرار دارد بذارید:

input:placeholder-shown {
  border: 2px solid darkorange !important;
}

لینک دمو

بهترین پاسخ

محسن موحد ۱۲ مرداد ۱۴۰۲، ۲۲:۰۵

بله بسیار ممنونم از لطف شما . امتحان کردم درست شد . تشکر

علی نبی زاده ۱۳ مرداد ۱۴۰۲، ۱۰:۴۸