入力タイプタグの必須属性を特定のボタンに対してのみ機能させる方法は？

2つの入力フィールドfirst nameとlast nameでhtml形式のフォームを作成し、required属性を入力タイプタグに追加しました。私はまた、2つのボタンSubmitとViewを作りました。両方のフィールドが空白の場合、please fill out this field attributeというメッセージが表示されます。送信ボタンをクリックすると、フォームからのデータがphpを使用してSQLデータベースに保存されますが、これは問題ありません。しかし、私がビューボタンをクリックすると、first nameとlast nameのテキスト領域を埋めることなくメッセージを表示したいだけです。ビューボタンでこれを行うにはどうしたらいいですか？入力タイプタグの必須属性を特定のボタンに対してのみ機能させる方法は？

tl; dr：input typeタグの 'required'属性が、表示ボタンではなく送信ボタンに対してのみ機能するようにします。私はどのようにこれを行う必要がありますか？私はフォームのためのHTML、スタイリングのためのCSSとSQLのエントリのPHPを使用しています。ありがとう。

出典

2016-04-27 shraey.chikker

あなたの「表示」ボタンのタイプは何ですか？「提出」のタイプがサブミットであると仮定した場合 –

はい、送信タイプです。 –

たとえば、各入力にIDを指定して、ビューボタンがクリックされたことを検出して「必須」属性を削除するなど、JavaScriptを使用してそのようなことを行うことができます。ここで

は、jQueryの例である：

<html> 
<head> 
<script src="http://code.jquery.com/jquery-latest.min.js" type="text/javascript"></script> 
<script> 
$(document).ready(function() { 
    $("#view").click(function() { 
     $("#test1").removeAttr("required"); 
     $("#test2").removeAttr("required"); 
    }); 
}); 
</script> 
</head> 
<body> 
    <form action="example.php" method="POST"> 
    First name:<br /> 
    <input type="text" name="firstname" id="test1" required="required"><br /> 
    Last name:<br /> 
    <input type="text" name="lastname" id="test2" required="required"><br /> 
    <input type="submit" value="Submit"> | <input type="submit" id="view" value="View"> 
</form> 
</body> 
</html>

JSFiddle

出典

2016-04-27 20:28:14

ありがとうございますが、JavaScriptなしでこれを行う方法はありますか？ –

@ shraey.chikker残念なことに、 'required'属性はDOM（Document Object Model）の一部です。 JavaScriptはDOMを操作できますが、CSSは操作できません。 PHPはDOMを操作することもできますが、ここで必要なのはクライアント側ではなく、サーバー側の言語です。 –

ああ。ありがとう。私はおそらくJavaScriptの方法を使用します。 –

ます。また、クリックイベントのデフォルトのアクションを防ぐことができます。この場合、コードは次のようになります。

$(document).ready(function() { 
    $("#view").click(function() { 
    return false; 
    }); 
});

または使用のpreventDefaultを：

$(document).ready(function() { 
    $("#view").click(function(e) { 
    e.preventDefault(); 
    }); 
});

の両方が正常に動作するようです。 #view（前述の回答のように）は、必要な属性をトリガするのを防ぎたいボタンのidです。

出典

2017-02-10 18:56:06 Vadi

入力タイプタグの必須属性を特定のボタンに対してのみ機能させる方法は？

答えて

関連する問題