スマホで使いやすい申し込みフォーム③

jQueryです。

  $(function(){
    $.fn.autoKana('#name', '#furi_name', {
        katakana : true  //true：カタカナ、false：ひらがな（デフォルト）
    });

    //フォーカスされたとき
    $("#name").focus(function(){
        $(this).css("background-color", "#fff");
        $(this).next("p").remove();
        $(".label").addClass('slide');
    });
    $("#furi_name").focus(function(){
        $(this).css("background-color", "#fff");
        $(this).next("p").remove();
        $(".label2").addClass('slide');
    });
    $("#schoolName").focus(function(){
        $(this).css("background-color", "#fff");
        $(this).next("p").remove();
        $(".label3").addClass('slide');
    });
    $("#adr-num").focus(function(){
        $(this).css("background-color", "#fff");
        $(this).next("p").remove();
        $(".label4").addClass('slide');
    });
    $("#adr-reg").focus(function(){
        $(this).css("background-color", "#fff");
        $(this).next("p").remove();
        $(".label5").addClass('slide');
    });
    $("#adr-loc").focus(function(){
        $(this).css("background-color", "#fff");
        $(this).next("p").remove();
        $(".label6").addClass('slide');
    });
    $("#adr-str").focus(function(){
        $(this).css("background-color", "#fff");
        $(this).next("p").remove();
        $(".label7").addClass('slide');
    });
    $("#adr-other").focus(function(){
        $(this).css("background-color", "#fff");
        $(this).next("p").remove();
        $(".label8").addClass('slide');
    });
    $("#tel").focus(function(){
        $(this).css("background-color", "#fff");
        $(this).next("p").remove();
        $(".label9").addClass('slide');
    });
    $("#mail").focus(function(){
        $(this).css("background-color", "#fff");
        $(this).next("p").remove();
        $(".label10").addClass('slide');
    });

    $("#name").blur(function() { //blur=フォーカスが外れたら
        let inputName = $("#name").val();
        if(inputName){
            console.log(inputName);
            $(this).css("border-bottom", "2px solid #8BC34A");
            $(this).css("background-color", "rgb(255, 255, 255)");
        }else{
            let being = $(".nameForm").find(".alert").length;
            console.log(being);
            if(being !== 0){
                console.log("あるよ");
            }else{
                $(".nameForm").append("<p class=\"alert\">お名前を記入してください</p>");
                $(this).css("background-color", "rgb(254, 232, 232)");
                $(this).css("border-bottom", "2px solid #f00");
            }
        }
     });

     $("#furi_name").blur(function(){
        let inputFuriName = $("#furi_name").val();
        if(inputFuriName){
            console.log(inputFuriName);
            $(this).css("border-bottom", "2px solid #8BC34A");
            $(this).css("background-color", "rgb(255, 255, 255)");
        }else{
            let being = $(".furiNameForm").find(".alert").length;
            console.log(being);
            if(being !== 0){
                console.log("あるよ");
            }else{
                $(".furiNameForm").append("<p class=\"alert\">フリガナを記入してください</p>");
                $(this).css("background-color", "rgb(254, 232, 232)");
                $(this).css("border-bottom", "2px solid #f00");
            }
        }
     });

     $("#schoolName").blur(function(){
        let schoolName = $("#schoolName").val();
        if(schoolName){
            console.log(schoolName);
            $(this).css("border-bottom", "2px solid #8BC34A");
            $(this).css("background-color", "rgb(255, 255, 255)");
        }
        else{
            let being = $(".schoolNameForm").find(".alert").length;
            console.log(being);
            if(being !== 0){
                console.log("あるよ");
            }else{
                $(".schoolNameForm").append("<p class=\"alert\">学校名を記入してください</p>");
                $(this).css("background-color", "rgb(254, 232, 232)");
                $(this).css("border-bottom", "2px solid #f00");
            }
        }
     });

     $("#adr-num").blur(function(){
        let adrNum = $("#adr-num").val();
        if(adrNum){
            console.log(adrNum);
            $(this).css("border-bottom", "2px solid #8BC34A");
            $(this).css("background-color", "rgb(255, 255, 255)");
        }else{
            let being = $(".adr-num").find(".alert").length;
            console.log(being);
            if(being !== 0){
                console.log("あるよ");
            }else{
                $(".adr-num").append("<p class=\"alert\">郵便番号を記入してください</p>");
                $(this).css("background-color", "rgb(254, 232, 232)");
                $(this).css("border-bottom", "2px solid #f00");
            }
        }
     });

     $("#adr-reg").blur(function(){
        let adrReg = $("#adr-reg").val();
        if(adrReg){
            console.log(adrReg);
            $(this).css("border-bottom", "2px solid #8BC34A");
            $(this).css("background-color", "rgb(255, 255, 255)");
        }else{
            let being = $(".adr-reg").find(".alert").length;
            console.log(being);
            if(being !== 0){
                console.log("あるよ");
            }else{
                $(".adr-reg").append("<p class=\"alert\">都道府県名を記入してください</p>");
                $(this).css("background-color", "rgb(254, 232, 232)");
                $(this).css("border-bottom", "2px solid #f00");
            }
        }
     });

     $("#adr-loc").blur(function(){
        let adrLoc = $("#adr-loc").val();
        if(adrLoc){
            console.log(adrLoc);
            $(this).css("border-bottom", "2px solid #8BC34A");
            $(this).css("background-color", "rgb(255, 255, 255)");
        }else{
            let being = $(".adr-loc").find(".alert").length;
            console.log(being);
            if(being !== 0){
                console.log("あるよ");
            }else{
                $(".adr-loc").append("<p class=\"alert\">市町村名を記入してください</p>");
                $(this).css("background-color", "rgb(254, 232, 232)");
                $(this).css("border-bottom", "2px solid #f00");
            }
        }
     });

     $("#adr-str").blur(function(){
        let adrStr = $("#adr-str").val();
        if(adrStr){
            console.log(adrStr);
            $(this).css("border-bottom", "2px solid #8BC34A");
            $(this).css("background-color", "rgb(255, 255, 255)");
        }else{
            let being = $(".adr-str").find(".alert").length;
            console.log(being);
            if(being !== 0){
                console.log("あるよ");
            }else{
                $(".adr-str").append("<p class=\"alert\">番地を記入してください</p>");
                $(this).css("background-color", "rgb(254, 232, 232)");
                $(this).css("border-bottom", "2px solid #f00");
            }
        }
     });

     $("#tel").blur(function(){
        let tel = $("#tel").val();
        if(tel){
            console.log(tel);
            $(this).css("border-bottom", "2px solid #8BC34A");
            $(this).css("background-color", "rgb(255, 255, 255)");
        }else{
            let being = $(".tel").find(".alert").length;
            console.log(being);
            if(being !== 0){
                console.log("あるよ");
            }else{
                $(".tel").append("<p class=\"alert\">電話番号を記入してください</p>");
                $(this).css("background-color", "rgb(254, 232, 232)");
                $(this).css("border-bottom", "2px solid #f00");
            }
        }
     });

     $("#mail").blur(function(){
        let mail = $("#mail").val();
        if(mail){
            console.log(mail);
            $(this).css("border-bottom", "2px solid #8BC34A");
            $(this).css("background-color", "rgb(255, 255, 255)");
        }else{
            let being = $(".mail").find(".alert").length;
            console.log(being);
            if(being !== 0){
                console.log("あるよ");
            }else{
                $(".mail").append("<p class=\"alert\">メールアドレスを記入してください</p>");
                $(this).css("background-color", "rgb(254, 232, 232)");
                $(this).css("border-bottom", "2px solid #f00");
            }
        }
     });
  });

  let check = $("#attendant");
  console.log(check);
  check.click(function(){
    let flag = check.prop("checked");
    console.log(flag);
    if(flag == true){
        console.log('チェックされたよ');
        let familyWrap = $(".family-wrap");
        familyWrap.css('display', 'block');
    }else{
        console.log('チェックが外れたよ');
        let familyWrap = $(".family-wrap");
        familyWrap.css('display', 'none');
    }
  });

  //チェックボックスで送信ボタンON
  $(function() {
    $('#submit').attr('disabled', 'disabled');
  
    $('#info').click(function() {
      if ( $(this).prop('checked') == false ) {
        $('#submit').attr('disabled', 'disabled');
      } else {
        $('#submit').removeAttr('disabled');
      }
    });
  });

一番上はフリガナ入力の設定です。

残りが私が書いたもので、必須項目から未入力のままフォーカスが外れると赤い吹き出しで警告文を出したり、枠や背景の色を赤から緑に変更したりしています。

モバイルフレンドリーなフォームを目指したので、要素を横に並べない、縦に長くなりすぎない、ラベルはinputの上に置く、電話番号などをハイフンで分けないなど注意点を盛り込んで作りました。このような注意点は「EFO」というそうです。SEOみたいな感じでしょうか。

Webサイトの大きな壁であるフォームは出来るだけ入力したくないですね。もしするとしたらわかりやすく、最小限がいいし、自動で入るところは全部入ってほしいけど間違えたまま送信したら嫌だな…。お客さんはワガママです。