The 1.html code adds the. Error label to the input and select sibling elements to store the error message
<form action= "" method= "Post" enctype= "Multipart/form-data" id= " Sound-dialog-form "> <div class=" Form-group "> <label for=" name "> Name </label> <input type= "text" class= "Form-control" id= "name" value= "" Name= "Soundname" > <span id= "Soundname-err or "class=" error "></span> </div> <div class=" Form-group "> <label for=" Sound "& gt; audio </label> <select name= "sound" id= "sounds" > <option value= "" Disabled hidden selected Styl E= "Font-weight:bold" > Audio selection .....</option> <volist name= "Play_volume" id= "Play_volume" > < Option value= "{$play _volume.name}" >{$play _volume.name}</option> </volist> </select> <span id= "Playvolume-error" class= "Error" ></span> </div> </form>
2. Define CSS styles. form-group {position:relative;} . The definition of error can be referenced
. error {Position:absolute; top:50px; left:73px; color: #fff; background: #e00a0a; font-weight:bold; border:0; border -radius:5px; }
3.js part
The regular expression var reg1 =/^. {1,}$/; The name satisfies the condition//alert (window.innerwidth+ ' ssssssssss ' +window.innerheight);//alert (window.innerheight);// Set Audio information function Setaudio ($id, name,sound,length,note,volume) {var tan = Layer.open ({type:1, title: ' Edit Sound ', area:[' 370px ', ' 450px '], offset: ' 50px ', anim:1, Content: $ ("#sound-dialog"), btn:[' Save ', ' play ', ' delete ', ' Cancel ', Btn1:function (index) {///Get the value of the tag var name = $ (' #name '). Val (); var length = $ (' #length '). Val (); var sound = $ (' #sound '). Val (); var note = $ (' #note '). Val (); var Volumeamount = $ ("#volumeAmount"). Text ($ ("#volumeSlider"). Slider ("value"). Text (); The sound name of the regular if (!reg1.test (name)) {var soundnameerror=$ ("#SoundName-error"). Text ("Please enter the correct name"); $ ("#SoundName-error") . css ({"padding": "2px 6px 2px 6px"}); ErrorName ("name", Soundnameerror);} if (sound===null| | sound=== "" | | sound===undefined) {var playvolumerror=$("#PlayVolume-error"). Text ("Please select Audio"), $ ("#PlayVolume-error"). css ({"padding": "2px 6px 2px 6px"}); Errorvolume ("Sound", playvolumerror); return; } if (! Soundnameerror) {$.ajax ({"url": "{: U (' Sound/editvolume ')}", "type": "POST", "data": {"action": "Editsound", "id": $id, "Name": Name,//"Length": Length, "Volumeslider": Volumeamount, "Note": note, "Sound": Sound}, Success:function (DA TA) {layer.close (index); Layer.msg ("Modified successfully!"); $ ("#navside"). Load ("/sound/index #navside"); }, Error:function (data) {layer.msg ("Set Audio information error"); }})}, Btn2:fuNction (Index) {///volume var play_slider_val = number ("#volumeAmount"). Text ($ ("#volumeSlider"). Slider (" Value ")). Text ()); Audio var play_audio_frequency = $ ("#sound"). Val (); if (play_audio_frequency==null) {layer.msg ("Please select audio"); }else{//Get audio var audios= new roslib. Message ({data:play_audio_frequency}); Volume_play.publish (audios); Debug volume var volumes= new roslib. Message ({data:play_slider_val}); Volume_voice.publish (volumes); Console.log (Play_slider_val); Console.log (play_audio_frequency); } return false; }, Btn3:function (index) {$.ajax ({"url": "{: U (' Sound/editvolume ')}", "type ":" Post "," data ": {" Action ": "Deletesound", "id": $id}, Success:function (data) {Laye R.close (index); Layer.msg ("Delete succeeded! "); $ ("#navside"). Load ("/sound/index #navside"); }, Error:function (data) {layer.msg ("Error deleting audio! "); }})//return false; }, End:function () {//Layer.msg ("Canceled"); } }); if ($id!==undefined) {//$ ("#amount"). Val ($ ("#slider-range-max"). Slider ("value")); LabelElement ($id, Name,sound,note,length,volume); }else{labelelement (); $ (". Layui-layer-btn2"). Hide (); }}//Slider swipe to get the volume size $ ("#volumeSlider"). Slider ({min:0, max:100, value:100, Slide:function (event, UI) { $ ("#volumeAmount"). Text (Ui.value); $ ("#sound-volume"). Val (Ui.value); var slider_display=$ ("#volumeAmount"). Text (); var slider_input= $ ("#VolumeValue"). Val (Slider_display); var slider_val=number (Slider_input.val ());//volume var audio_frequency = $ ("#sound"). Val ();//Voice if (Audio_frequenc Y==null) {layer.msg ("Please select audio"); }else{//audio var number= new roslib. Message ({data:audio_frequency}); Volume_play.publish (number); Volume var number1= new roslib. Message ({data:slider_val}); Volume_voice.publish (NUMBER1); Console.log (audio_frequency); Console.log (Slider_val); }});//Gets the value of the element function LabelElement (id,name,sound,note,length,volume) {if (id===undefined&&name===undefined&&sound===undefined&&volume===undefined) {id= ""; Name= ""; sound= "" note= ""; length= ""; volume=100; } $ ("#name"). Val (name); $ ("#sound"). Val (sound); $ ("#sound"). Prop (' required ', false); $ ("#note"). Val (note); $ (' #sound-dialog '). Find (' #length '). val (length); $ ("#volumeSlider"). Slider (' value ', volume); $ ("#volumeAmount"). Text ($ ("#volumeSlider"). Slider ("value"). Text (); }//Hidden Error trigger Mode function ErrorName (value,error) {var errtxt=error.text ();//Get error message//Press Trigger Event $ ("#" +value). KeyUp (Fu Nction () {var valuetext=$ ("#" +value). Val ();//monitor input values at any time errormode (value,valuetext,error,errtxt); }); }//Hidden Error trigger Mode function Errorvolume (value,error) {var errtxt=error.text ();//Get error message//Click Trigger Event $ ("#" +value). Click (func tion () {var valuetext=$ ("#" +value). Val ();//monitor input values at any time errormode (value,valuetext,error,errtxt); });} Error information processing function Errormode (value,texts,error,errtxt) {if (texts!== "" & &texts!==null&&texts!==undefined) {Error.text ("");//Clear error message $ ("#" +value). Siblings (". Error"). css ({"padding": "0px"}); }else{//Add error message $ ("#" +value). Siblings (". Error"). Text (errtxt); $ ("#" +value). Siblings (". Error"). css ({"padding": "2px 6px 2px 6px"}); }}
Effect Preview Link: Https://pan.baidu.com/s/1FkZ1DlqG_E_GFLw06HXtkQ Password: Irdi
JS monitoring from the form of input and select, constant monitoring, no input or select information error, not allow data submission