【Java script問題集】1-7 フォームの未入力チェックをしてみよう

1-7.html

<html>
<head>
<title>1-7</title>
    <script language="javascript" type="text/javascript">
    $(function(){
    $('#submit_btn').on('click'function(){
    if($('#name').val() === '' || $('#age').val() === ''){
      alert('入力してください!');
      $(this).focus();
      return false;
    }
      alert('送信完了!');
  });
});
</script>
</head>
<body>
  <form>
     <input id="name" placeholder="名前">
     <input id="age" placeholder="年齢">
     <input id="submit_btn" type="submit">
  </form>
</body>
</html>

実行結果(送信ボタン押下前)

f:id:mkyosuke:20200629120020p:plain

実行結果(名前未入力で送信ボタン押下)

f:id:mkyosuke:20200629120046p:plain

実行結果(名前入力で送信ボタン押下)

f:id:mkyosuke:20200629120114p:plain