DBに登録されてあるデータ見に行くのめんどくさいし、表示されてる要素を取得して判断すればよくね？って何も考えずに書いた処理です。
（さすがによくないことは気づいてましたけど）
どうしてもDBを見に行けない、とか簡単なバリデートチェックをしたいとか言う時に使える・・・かも
cate_check.js
//表示してあるカテゴリー名を取得し、入力された値と比較
function cateCheck (){
var cateArray = new Array();
$(".cateNm").each(function(i, elem) {
cateArray.push($(elem).text());
if($(elem).text() == $('#category_nm').val()){
//表示されているカテゴリー名が入力されたら警告
window.alert('そのカテゴリー名は既に登録されています。');
$('#category_nm').val("");
};
});
}
（アラート出たあとに入力された値を強制的にクリアして送信させなくしてます）
test.html
<!-- カテゴリー入力欄（テキストボックス） -->
<input type="text" name="name" size="30" maxlength="20" id="category_nm" onChange="cateCheck();">
<table>
<?php
$row = 0;
//DBから取得したカテゴリーを表示
foreach($con_data as $con){
?>
<tr>
<td><?php echo $row; ?></td>
<td class="cateNm"><?php echo $con['category_name']; ?></td>
</tr>
<?php
$row ++;
}
?>
</table>
簡単に確認するためのテストコードを書いておきます(このままコピペで確認できます）
sample.html
<!-- 入力欄に以下のアニメ・ゲーム・マンガを入力するとアラートが出る -->
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<script>
function cateCheck (){
var cateArray = new Array();
$(".cateNm").each(function(i, elem) {
cateArray.push($(elem).text());
if($(elem).text() == $('#category_nm').val()){
//表示されているカテゴリー名が入力されたら警告
window.alert('そのカテゴリー名は既に登録されています。');
$('#category_nm').val("");
};
});
}
</script>
</head>
<body>
<input type="text" name="name" size="30" maxlength="20" id="category_nm" onChange="cateCheck();">
<input type="submit" value="登録(仮)">
<table border="1">
<tr><td>1</td><td class="cateNm">アニメ</td></tr>
<tr><td>2</td><td class="cateNm">ゲーム</td></tr>
<tr><td>3</td><td class="cateNm">マンガ</td></tr>
</table>
</body>
</html>
結局、勝手に要素とかイジられると普通に突破されて登録できてしまうので、
DBの重複チェックはやっぱり素直にDBを見に行った方が確実ですね。