常連

下記のようなコードを書いておりjquery.validate.jsを使用してます。
エラー文言とともに入力した枠を赤色にしたいです。
下記のフォームをどのように変えるとよいでしょうか。
ご教示いただけませんでしょうか。

よろしくお願いいたします。


      
      <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.2.6/jquery.min.js"></script>
      <script type="text/javascript" src="jquery.validate.js"></script>
      <script type="text/javascript">
         $.validator.setDefaults({
            submitHandler: function() { alert("submitted!"); }
         });
         $().ready(function() {
            // validate the comment form when it is submitted
            $("#commentForm").validate();
            
            // validate signup form on keyup and submit
            $("#signupForm").validate({
               rules: {
                  firstname: "required",
                  lastname: "required" {
                     required: true,
                     minlength: 2
                  },
                  password: {
                     required: true,
                     minlength: 5
                  },
                  email: {
                     required: true,
                     email: true
                  },
                  email: "正しい「メールアドレス】を入力してください",
               }
            });
            // propose username by combining first- and lastname
            $("#username").focus(function() {
               var firstname = $("#firstname").val();
               var lastname = $("#lastname").val();
               if(firstname && lastname && !this.value) {
                  this.value = firstname + "." + lastname;
               }
            });
          });
      </script>
      
      <style type="text/css">
         form { width:80%; }
         fieldset { margin:10px; padding:10px; }
         p { clear:both; margin:0; padding:0; overflow:hidden; }
         label { width:20em; float:left; display:block; }
         fieldset#newsletter_topics label { display:inline; width:auto; margin-right:10px; }
         textarea, input.txt { margin-right:10px; width:20em; float:left; }
         .error { color:#ff6699; white-space:nowrap; display:inline; }
      </style>
   <body id='example3' class='example'>
      <div id="wrap">
         <h1>サンプル</h1>

         <form id="commentForm" method="get" action="">
            <fieldset>
               <legend>あなたの名前、メールアドレス、住所、コメントを入力してください</legend>
               <p>
                  <label for="cname">名（必須、2文字以上）</label>
                  <input id="cname" name="name" class="txt required" minlength="2" />
               <p>
                  <label for="cemail">メールアドレス（必須）</label>
                  <input id="cemail" name="email" class="txt required email" />
               </p>
               <p>
                  <input class="submit" type="submit" value=" 送信 "/>
               </p>
            </fieldset>
         </form>

エラー時にフォームの色を変えたいです。

jquery.validationEngine-ja.js で入力フォームのチェックをさせています。
今回、海外の方から「電話番号が入力できない」と問い合わせが来て、
コードをあらためて確認したところ、

```JavaScript
				"tel": {
					// credit: jquery.h5validate.js / orefalo
					"regex": /^0[0-9\-]{7,13}$/,
					"alertText": "電話番号が正しくありません"
				},
```
となっていました。

希望としては、
・国内の固定電話のチェック
 03-○○○○-○○○○
  045-○○○-○○○○
  0456-○○-○○○○
  04567-○-○○○○
  0120-○○○-○○○
・携帯電話のチェック
 090-○○○○-○○○○
に加えて、
・国際電話番号のチェック
 +81-3-○○○○-○○○○（+プラス記号の記入も許可する）
 81-3-○○○○-○○○○
も確認させたいのですが、どのように書き直したらよいのでしょうか？
-（ハイフン）はあってもなくても許可させたいです。

初めての質問で、わかりづらいところも多いと思いますが 
どなたか回答お願い致します。

国際電話番号を含めた電話番号の正規表現がわからない

jQuery ValidationEngineを利用すると入力値をチェックできるのですが、
フォーカスが外れた時に初めてチェックが入ります。
これをフォーカスが当たっている最中にチェックする形に変更できないでしょうか？

例えば8文字以上必須の入力欄で、7文字目まで入力中はエラーが表示され、
8文字目を入力すると自動でエラーが消えたり、
一度必須エラーの出たセレクトボックスで、項目を選ぶと同時に
エラーが消えるような形にしたいです。

つたない説明で申し訳ありませんが、ご教授下さいますよう、お願いします。

jQuery ValidationEngineをよりリアルタイムにするには？

STS4を使ってSpringの参考書を進めていましたがvalidationの章で

import javax.validation.constraints.AssertFalse;
import javax.validation.constraints.Email;
import javax.validation.constraints.Max;
import javax.validation.constraints.Min;
import javax.validation.constraints.NotBlank;
import javax.validation.constraints.NotNull;
import javax.validation.constraints.Pattern;

をインポートしようと入力したところ「インポートされた javax.validation は見つかりません」というエラーが出てが出てしまいました。

調べてみたところライブラリーのビルドパスが通っていないのが原因のようだったので、

jarファイルのビルドパスを通そうと思いましたがvalidationが入ったjarファイルがどれかわからず行き詰ってしまいました。

そこで質問なのですが、validationを使えるようにするにはどのjarファイルのビルドパスを通せばよいのでしょうか。

もしくは全く別の可能性が考えられるならご指摘お願いします。

インポートされた javax.validation は見つかりません

JS(JavaScript)でバリデーションしているユーザー登録フォームや購入フォームはよく見かけますが、
ログインフォームの特にパスワード入力欄に必須チェック以外を実装しているサイトを見たことがありません。
文字数制限や入力不可文字などが存在するのですから、それらのバリデーションを実装したほうがユーザビリティは良いと思うのですが、実装しないのは何か理由があるのでしょうか？

ログインフォームではなぜJSでバリデーションしないのでしょうか？

validation engineを使って数値の大小を比べ入力制限をしたいと思っています。
例えば以下のようにセレクトボックスA、Bがあるときに、Aで2を選んだら、
Bは3以上でなければアラートが出るという形です。

<select name="A" id="A">
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
</select>

<select name="B" id="B">
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
</select>

他の入力チェックにvalidation engineを使っており、
出来れば統一して制限をかけられればと思っていますので、宜しくお願い致します。

jQueryValidationEngineで２つのセレクトボックスの大小チェックを入れるには？

日時指定で要素の表示と非表示を切り替えるjQueryにつきまして、
下記HTML内のdata-start-date、data-end-dateなのですが、年月を記載せずに日にちだけ指定することは可能でしょうか？
やりたいこととしましては月の前半と後半でソースが切り替わるようにしたく、日にちだけの指定が理想的なのです。

大変恐れ入りますが、ご教示いただけますと幸いです。
よろしくお願い致します。

【jQuery】
$(document).ready(function() {
  $(".view_timer").each(function(index, target) {
    var startDate = $(this).attr("data-start-date");
    var endDate = $(this).attr("data-end-date");
    var nowDate = new Date();

    if (startDate) {
      startDate = new Date(startDate);
    } else {
      startDate = nowDate;
    }
    if (endDate) {
      endDate = new Date(endDate);
    }

    if (startDate <= nowDate && (!endDate || nowDate <= endDate)) {
      $(this).show();
    } else {
      $(this).hide();
    }
  });
});

【HTML】
<span class="view_timer" data-start-date="2022/3/31 17:53" data-end-date="2022/3/31 17:54">


下記記事からの引用となります。
https://codelife.cafe/entry/2016/02/14/%E6%97%A5%E6%99%82%E6%8C%87%E5%AE%9A%E3%81%A7%E8%A6%81%E7%B4%A0%E3%81%AE%E8%A1%A8%E7%A4%BA%E3%81%A8%E9%9D%9E%E8%A1%A8%E7%A4%BA%E3%82%92%E5%88%87%E3%82%8A%E6%9B%BF%E3%81%88%E3%82%8BjQuery%E3%81%8C

日時指定で要素の表示と非表示を切り替えるjQuery

# 解決したいこと
jQueryを使ってフォームに入力された値を自動計算したい

## 現状
現在フリマアプリを作成してます。出品する際に金額を指定するのですが、入力した金額の手数料と販売利益を自動で計算して表示してくれる機能を実装したいのですが出来ません。

## 試したこと
jsファイルに以下を記述してみたが動作しなかった。

products_new.js
```

$(function(){
  $('#price-result').change(function(){
    var s = $(#price-result).val();
    var result = s / 10;
  
    $('.haihun_tax').append(result);
  });
});
```

## 記述コード
new.html.haml

```
　　　省略

        .new_page_price
          %span.label_title
            販売価格
          %span.required 必須
          .price__table
            %span ¥
            %span 
              = form.text_field :price, placeholder: "0", id: "price-result"

        .new_page_main__sales_commission
          %span.sales_commission 販売手数料（10%）
          %span.haihun_tax ー
        %hr
        .new_page_main__profit
          %span.profit 販売利益
          %span.haihun-profit ー        

        %but.exhibit
          = form.submit '出品する', class:"submit-exhibit"
        %button.save 下書きに保存
        .escape 
          = link_to root_path do
            戻る

　　省略
```

##参考
rails 5.2.3
MySql

jQuery Validation Plugin